炫酷的 CSS 形状(值得收藏)

Posted lwming

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了炫酷的 CSS 形状(值得收藏)相关的知识,希望对你有一定的参考价值。

在今日头条中看到炫酷的 CSS 形状,就记录一下:

1.圆形

技术图片

 

#circle {
 width: 100px;
 height: 100px;
 background: red;
 border-radius: 50%
}

 2.椭圆形

技术图片

#oval {

width: 200px;

height: 100px;

background: red;

border-radius: 100px / 50px;

}

3.上三角

技术图片

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

4.星星 (5角)

技术图片

#star-five {

margin: 50px 0;

position: relative;

display: block;

color: red;

width: 0px;

height: 0px;

border-right: 100px solid transparent;

border-bottom: 70px solid red;

border-left: 100px solid transparent;

transform: rotate(35deg);

}

#star-five:before {

border-bottom: 80px solid red;

border-left: 30px solid transparent;

border-right: 30px solid transparent;

position: absolute;

height: 0;

width: 0;

top: -45px;

left: -65px;

display: block;

content: ‘‘;

transform: rotate(-35deg);

}

#star-five:after {

position: absolute;

display: block;

color: red;

top: 3px;

left: -105px;

width: 0px;

height: 0px;

border-right: 100px solid transparent;

border-bottom: 70px solid red;

border-left: 100px solid transparent;

transform: rotate(-70deg);

content: ‘‘;

}

5.爱心

技术图片

#heart {

position: relative;

width: 100px;

height: 90px;

}

#heart:before,

#heart:after {

position: absolute;

content: "";

left: 50px;

top: 0;

width: 50px;

height: 80px;

background: red;

border-radius: 50px 50px 0 0;

transform: rotate(-45deg);

transform-origin: 0 100%;

}

#heart:after {

left: 0;

transform: rotate(45deg);

transform-origin: 100% 100%;

}

6.对话泡泡

技术图片

#talkbubble {
 width: 120px;
 height: 80px;
 background: red;
 position: relative;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
}
#talkbubble:before {
 content: "";
 position: absolute;
 right: 100%;
 top: 26px;
 width: 0;
 height: 0;
 border-top: 13px solid transparent;
 border-right: 26px solid red;
 border-bottom: 13px solid transparent;
}

7.徽章丝带

技术图片

#badge-ribbon {
 position: relative;
 background: red;
 height: 100px;
 width: 100px;
 border-radius: 50px;
}
#badge-ribbon:before,
#badge-ribbon:after {
 content: ‘‘;
 position: absolute;
 border-bottom: 70px solid red;
 border-left: 40px solid transparent;
 border-right: 40px solid transparent;
 top: 70px;
 left: -10px;
 transform: rotate(-140deg);
}
#badge-ribbon:after {
 left: auto;
 right: -10px;
 transform: rotate(140deg);
}

8.放大镜

技术图片

#magnifying-glass {
 font-size: 10em;
 display: inline-block;
 width: 0.4em;
 box-sizing: content-box;
 height: 0.4em;
 border: 0.1em solid red;
 position: relative;
 border-radius: 0.35em;
}
#magnifying-glass:before {
 content: "";
 display: inline-block;
 position: absolute;
 right: -0.25em;
 bottom: -0.1em;
 border-width: 0;
 background: red;
 width: 0.35em;
 height: 0.08em;
 transform: rotate(45deg);
}

9.锁

技术图片

 

#lock {
 font-size: 8px;
 position: relative;
 width: 18em;
 height: 13em;
 border-radius: 2em;
 top: 10em;
 box-sizing: border-box;
 border: 3.5em solid red;
 border-right-width: 7.5em;
 border-left-width: 7.5em;
 margin: 0 0 6rem 0;
}
#lock:before {
 content: "";
 box-sizing: border-box;
 position: absolute;
 border: 2.5em solid red;
 width: 14em;
 height: 12em;
 left: 50%;
 margin-left: -7em;
 top: -12em;
 border-top-left-radius: 7em;
 border-top-right-radius: 7em;
}
#lock:after {
 content: "";
 box-sizing: border-box;
 position: absolute;
 border: 1em solid red;
 width: 5em;
 height: 8em;
 border-radius: 2.5em;
 left: 50%;
 top: -1em;
 margin-left: -2.5em;
}

更多炫酷的 CSS 形状的原链接:https://www.toutiao.com/i6693373488746463747/



 

以上是关于炫酷的 CSS 形状(值得收藏)的主要内容,如果未能解决你的问题,请参考以下文章

肝了一宿才收集的48个超炫酷的 CSS 文字特效,绝对值得收藏!!!

第三方开源库-->推荐 21 个炫酷的开源库值得珍藏

python学习之10行代码制作炫酷的词云图(匹配指定图形形状)

值得收藏10个实现炫酷UI前端效果的CSS生成工具

值得收藏10个实现炫酷UI前端效果的CSS生成工具

带你玩转炫酷的CSS3