这是我参与更文挑战的第2天,活动详情查看 更文挑战
整理一些经常用到的css形状,本篇主要是效果与代码,方便直接取用,实现思路后面在单独开文;
会一直更新,所以不收藏一下吗😘。
三角形系列
直角三角形(左上)
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid #BAE0E3;
border-right: 100px solid transparent;
}
直角三角形(左下)
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid #BAE0E3;
border-right: 100px solid transparent;
}
直角三角形(右上)
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid #BAE0E3;
border-left: 100px solid transparent;
}
直角三角形(右下)
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid #BAE0E3;
border-left: 100px solid transparent;
}
等边三角形(向上)
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #BAE0E3;
}
等边三角形(向下)
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid #BAE0E3;
}
等边三角形(向左)
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid #BAE0E3;
border-bottom: 50px solid transparent;
}
等边三角形(向右)
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 50px solid #BAE0E3;
border-bottom: 50px solid transparent;
}
四边形系列
梯形
#trapezoid {
border-bottom: 100px solid #99CCFF;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 100px;
}
平行四边形
#parallelogram {
width: 150px;
height: 100px;
transform: skew(20deg);
background: #99CCFF;
}
菱形(方版)
#diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: #99CCFF;
position: relative;
top: -50px;
}
#diamond:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: #99CCFF;
}
菱形(长版)
#diamond-narrow {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid #99CCFF; /*注意这一句*/
position: relative;
top: -50px;
}
#diamond-narrow:after {
content: '';
position: absolute;
left: -50px;
top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid #99CCFF; /*注意这一句*/
}
圆形系列
椭圆
#oval {
width: 200px;
height: 100px;
background: #FFCC99;
border-radius: 100px / 50px;
}
鸡蛋圆
#egg {
display: block;
width: 126px;
height: 180px;
background-color: #FFCC99;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
其他系列
指向
#pointer {
width: 200px;
height: 40px;
position: relative;
background: #66CCFF
}
#pointer:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid white;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
#pointer:before {
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid #66CCFF;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
心形
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
月形
点题,来画一个可爱的小月牙
#moon {
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 15px 15px 0 0 red;
}
小可爱看完就点个赞再走吧!🤞🤞🤞