首页 > 代码库 > CSS3边框属性_圆角、CSS画基本图形（圆形、三角形、多边形、爱心、八卦等）

CSS3边框属性_圆角、CSS画基本图形（圆形、三角形、多边形、爱心、八卦等）

2024-07-15 22:24:40   220人阅读

有一些需要用到CSS3的属性，所以在你打开这篇文章的时候，用的是firefox或者chrome，当然IE也能看一部分

1、正方形

div{
    background:#F00;
    width:100px;
    height:100px;
}

 

2、长方形

div{
    background:#F00;
    width:200px;
    height:100px;
}

 

3、圆形

 

div{
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

 

4、椭圆

 

div{
    width: 200px;
    height: 100px;
    background: red;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}

 

 

 

 

5、上三角

 

 

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

 

 

6、正方形

 

7、正方形

8、正方形

9、正方形

10、正方形

11、正方形

12、正方形

 

13、正方形

14、正方形

15、正方形

16、正方形

17、正方形

18、正方形

 

19、正方形

20、正方形

21、正方形

22、正方形

23、正方形

 

 

24、正方形

 

25、正方形

26、8角星

 

div {
    background: red;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
    -webkit-transform: rotate(20deg);
       -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
         -o-transform: rotate(20eg);
            transform: rotate(20deg);
}
div:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: red;
    -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
         -o-transform: rotate(135deg);
            transform: rotate(135deg);
}

 

 

27、钻石

div{
    border-style: solid;
    border-color: transparent transparent red transparent;
    border-width: 0 25px 25px 25px;
    height: 0;
    width: 50px;
    position: relative;
    margin: 20px 0 50px 0;
}
div:after {
    content: "";
    position: absolute;
    top: 25px;
    left: -25px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: red transparent transparent transparent;
    border-width: 70px 50px 0 50px;
}

 

 

28、阴阳八卦

div {
    width: 96px;
    height: 48px;
    background: #eee;
    border-color: #000;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
}
 
div:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #eee;
    border: 18px solid #000;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}
 
div:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #000;
    border: 18px solid #eee;
    border-radius:100%;
    width: 12px;
    height: 12px;
}

 


联系
我们