【基础性】如何用CSS 画三角形?
发布在前端搬运工2013年12月20日view:5190
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

原文:http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work

问题:

在这个网站http://css-tricks.com/examples/ShapesOfCSS/上有许多用CSS制作的图形。我不太理解那个三角形是怎么做出来的。 enter image description here

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

回答:

CSS画三角形,只需五步

如果一个矩形框的边框宽度相等的话,边框会以45度角连接好。 enter image description here 接着,把 border-top 去掉,如下图: enter image description here 然后,把矩形框的 width 设为 0 enter image description here 再把矩形框的 height 设为 0 enter image description here 最后,让左右边框透明 enter image description here 结果我们就得到了一个三角形

补充:

看下面这段代码

.triangle {
    width:0;
    height:0;
    border-bottom:15px solid #000;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
}

结合下面这张图,会让你更清楚 边框宽度三角形底边、高 的关系 enter image description here

评论
发表评论
3年前

一目了然, 谢谢分享

6年前

@Button 了然了…他的配图如果再细致一点就好了…可能我理解太慢了….

6年前

@Button 亲自实践一下去…这样好理解O(∩_∩)O~

6年前

@听海JamiE 我翻译的读起来确实很别扭。原文是这么说的: borders of equal width butt up against each other at 45 degree angles。意思就是:边框与边框相交的那条线与边框成45度角。是不是更绕口了。O(∩_∩)O~,如果边框宽度不相等的话,角度会发生变化。

6年前

如果一个矩形框的边框宽度相等的话,边框会以45度角连接好。 这句话什么意思...

6年前

@张小俊128 原来是stackoverflow不让外链,已重新上传。:p

6年前

@张小俊128 你那看不到么??我这是可以的。我直接引用的stackoverflow上的原图,你到原文看看能看到图片么,http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work

6年前

肿么图片都挂掉了。。。。

WRITTEN BY
HtmlCssJs
Keep your sanity in this crazy frontend world
TA的新浪微博
PUBLISHED IN
前端搬运工

翻译一些前端相关的文章。来源有 http://stackoverflow.com/questions/tagged/css?sort=voteshttp://www.smashingmagazine.com/ 等等。。大家也可以把看起来不错的英文链接发给我,我尝试翻译下

我的收藏