HTML+CSS进阶学习摘录（CSS图形）（六）

一、三角形

#box1,#box2,#box3,#box4{width:0;height:0;border-width:20px;border-style:solid;display:table-cell;}#box1{ border-color:red transparent transparent transparent;}#box2{ border-color:transparent orange transparent transparent;}#box3{ border-color: green green transparent transparent;}#box4{ border-color:blue transparent blue transparent;}

<div id="outer"> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div> <div id="box4"></div></div>

                                                    

二、带边框的三角形

一般情况下，外层三角形border-width比内层大1px。此外，内层三角形的left值一般都是其border-width的负数，top值一般都是其border-width的负数加1.

#wrapper{display:inline-block;position:relative;padding:20px 30px;margin-top:100px;border:1px solid gray;border-radius:14px;font-size:14px;font-weighht:bold;text-align:center;background-color:#BBFFEE;}#triangle{position:absolute;top:-30px;        实现居中      left:50%;margin-left:15px;width:0;height:0;border-width:15px;border-style:solid;border-color:transparent transparent gray transparent;}#triangle div{position:absolute;top:-13px;left:-14px;width:0;height:0;border-width:14px;border-style:solid;border-color:transparent transparent #bbffee transparent;}

<div id="wrapper"><div id="triangle"><div></div></div>欢迎来到我的博客</div>

                                                              

三、实现圆角

（1）border-radius: 长度值;

#div1{width:50px;line-height:50px;border-radius:80% 90% 100% 20%;background-color:#E61588;font-size:30px;text-align:center;color:black;margin-top:100px;}

<div id="div1">3</div>

                                                        

（2）高度设置为宽度一半，左上角和右上角的圆角半径定义与元素高度一致，可实现半圆。同理可实现圆。

四、实现椭圆

#div2{width:160px;height:100px;border:1px solid gray;border-radius:80px/50px;}<div id="div2"></div>