我在写页面的时候遇到了很久很奇怪的图形。 在css中可以实现各种不规则的图形。 列举几个常用的东西吧。
一.三角形
利用border-color支持transparent的特性，隐藏三个边框，实现三角形。
. triangle {
width: 0；
height: 0；
border-style: solid；
盒- sizing :盒；
border-width: 0 10px 10px；
border-color :传输传输# C5 C5 C5传输；
}
效果如下。
二.左上三角形
. left-top-triangle {
width: 0；
height: 0；
border-style: solid；
盒- sizing :盒；
border-width: 10px；
border-color : # C5 C5 C5 transparent transparent # C5 C5；
}
效果如下。
三.正五边形
. pentagon {
width: 54px；
定位：关系；
border-width: 50px 18px 0；
border-style: solid；
border-color : # C5 C5 C5 transparent；
}
. pentagon:before {
内容： '；
定位：助手；
width: 0；
height: 0；
top: -85px；
left: -18px；
border-width: 0 45px 35px；
border-style: solid；
border-color :传输传输# c5c5c 5；
}
效果如下。
气泡盒
使用绝对对位进行三角形覆盖，实现气泡框的突出部分。
. bubble-tip {
width: 100px；
height: 30px；
line-height: 30px；
边距-左边缘： 10px；
border: 1px solid #c5c5c5；
border-radius: 4px；
定位：关系；
background-color: #fff；
}
. bubble-tip:before {
内容： '；
width: 0；
height: 0；
border-style: solid；
border-width: 10px 10px 10px 0；
border-color : transparent # fffftransparenttransparent；
定位：助手；
top: 5px；
left: -10px；
z-index: 2；
}
. bubble-tip:after {
内容： '；
width: 0；
height: 0；
border-style: solid；
border-width: 10px 10px 10px 0；
border-color : transparent # C5 C5 C5 transparent transparent；
定位：助手；
top: 5px；
left: -11px；
z-index: 1；
}
效果如下。
优惠券贴
在CSS3中，可以将background-size属性添加到background，以控制背景图像的大小，并结合background-position属性在一个背景下显示多个图像。
卡片的核心是采用透明的白色径向渐变的radial-gradient，分别默认四张背景图的左下角、右下角、右上角、左下角，并使用drop-shadow实现元素阴影，从而达到效果。
radial-gradient语法如下：
径向梯度(shapesizeatposition，start-color，last-color ) )。
价格说明
shape决定圆的类型：
ellipse (默认)指定：椭圆形的径向渐变。
circle :指定圆的径向渐变
size定义渐变的大小，可能的值如下：
farthest-corner默认值：指定径向渐变半径的长度，从圆心到最远的角
closest-side :指定径向渐变的半径长度从圆心到最接近圆心的边缘
closest-corner :指定径向渐变的半径长度，从圆心到最接近圆心的角
farthest-side :指定径向渐变的半径长度，从圆心到离圆心最远的边缘
position定义渐变的位置。 可能的值：
center (默认) :设置中心为径向渐变中心的纵坐标值。
top :设置顶部作为径向渐变中心的纵坐标值。
bottom :设置底面作为径向渐变中心的纵坐标值。
可以混合使用top right等
start-color，…，last-color用于指定渐变的开始颜色。
. coupon{
width: 200px；
height: 80px；
background : radial-gradient (circleatrightbottom，transparent 10px，#ffffff 0) top right/50% 40px no-repeat，
radial-gradient (circleatleftbottom，transparent 10px，#ffffff 0) top left/50% 40px no-repeat，
radial-gradient (circleatrighttop，transparent 10px，#ffffff 0) bottom right/50% 40px no-repeat，
随机梯度(circleatlefttop，transparent 10px，#ffffff 0) bottom left/50% 40px no-repeat；
filter : drop-shadow (3px 3px 3px # C5 C5 )；
}
效果如下。