神奇的 CSS 形状

fmms 8年前
     <p style="text-align:left;">在StackOverflow上有这么一个问题,有位同学在<a href="/misc/goto?guid=4958334395480360584">http://css-tricks.com/examples/ShapesOfCSS/ </a> 找到一些使用CSS做的形状,其中一位同学对下面的这个形状充满了疑问。</p>    <p style="text-align:left;">形状是:</p>    <p style="text-align:left;"><img class="size-full wp-image-6914" alt="神奇的 CSS 形状" src="https://simg.open-open.com/show/7c0703ebd0fc29af45767b593f6051ea.png" width="103" height="102" /></p>    <p style="text-align:left;">代码是:</p>    <pre class="brush:css; toolbar: true; auto-links: false;">#triangle-up {  width : 0 ;  height : 0 ;  border-left : 50px solid transparent ;  border-right : 50px solid transparent ;  border-bottom : 100px solid red ;  }</pre>    <p></p>    <div>     <div id="highlighter_306137" class="syntaxhighlighter css"></div>    </div>    <p>这位同学就提问啦,为啥这么这么几句就能画出一个三角形呢?<br /> 于是呢,有高人出现,这个高人图文并茂的解释了这个三角的成因</p>    <p><br /> 首先呢,我们需要了解HTML标记的Box Model(盒模型),这个例子中呢我们将content,padding都看作content。忽略掉margin。那么一个盒模型就是下图</p>    <p style="text-align:left;"><img class="size-full wp-image-6915" alt="神奇的 CSS 形状" src="https://simg.open-open.com/show/525970e5551b5ace25af26308535ecdc.png" width="340" height="266" /></p>    <p>中间是内容,然后是4条边。每一条边都有宽度。<br /> 根据上面CSS的定义,没有border-top(顶边)的情形下 ,我们的图形如下:</p>    <p style="text-align:left;"><img class="size-full wp-image-6916" alt="神奇的 CSS 形状" src="https://simg.open-open.com/show/59ec5461a18865d4b0c1dfc7ba2bcba8.png" width="340" height="266" /></p>    <p>width设置为0后 ,内容没有了就成为下图:</p>    <p style="text-align:left;"><img class="size-full wp-image-6917" alt="神奇的 CSS 形状" src="https://simg.open-open.com/show/8266f87ad79d40d7514a3b5f0342f30b.png" width="340" height="266" /></p>    <p>height也设置为0,只有底边了。</p>    <p style="text-align:left;"><img class="size-full wp-image-6918" alt="神奇的 CSS 形状" src="https://simg.open-open.com/show/b1b78d5efd3bb43c24aa450be66b6403.png" width="200" height="122" /></p>    <p>然后两条边都是设置为透明,最后我们就得到了</p>    <p style="text-align:left;"><img class="size-full wp-image-6919" alt="神奇的 CSS 形状" src="https://simg.open-open.com/show/23033d218acb398d223163bcb8462631.png" width="200" height="122" /></p>    <p>这个属于奇技淫巧,但是也说明CSS的强大,没有做不到只有想不到。另外<a href="/misc/goto?guid=4958334395480360584">http://css-tricks.com/examples/ShapesOfCSS/ </a>还能找到很多其他的形状,感兴趣的同学可以自己去看。</p>