本文主要是介绍CSS写三角形、五角形等不规则图形，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
写页面的时候时长遇到一些奇怪图形，用css是可以实现各种不规则图形的，下面举例几个常用的：
一、三角形
利用border-color支持transparent这一特性，隐藏三条边框，实现三角形。
<style>
.triangle {
width: 0;
height: 0;
border-style: solid;
box-sizing: border-box;
border-width: 0 10px 10px;
border-color: transparent transparent #c5c5c5 transparent;
}
</style>
<div class="triangle"></div>
效果如下：
二、左上三角形
<style>
.left-top-triangle {
width: 0;
height: 0;
border-style: solid;
box-sizing: border-box;
border-width: 10px;
border-color: #c5c5c5 transparent transparent #c5c5c5;
}
</style>
<div class="left-top-triangle"></div>
效果如下：
三、正五边形
<style>
.pentagon {
width: 54px;
position: relative;
border-width: 50px 18px 0;
border-style: solid;
border-color: #c5c5c5 transparent;
}
.pentagon::before {
content: "";
position: absolute;
width: 0;
height: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent #c5c5c5;
}
</style>
<div class="pentagon"></div>
效果如下：
气泡框
使用绝对定位进行三角形覆盖，实现气泡框突出部分。
<style>
.bubble-tip {
width: 100px;
height: 30px;
line-height: 30px;
margin-left: 10px;
border: 1px solid #c5c5c5;
border-radius: 4px;
position: relative;
background-color: #fff;
}
.bubble-tip::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #ffffff transparent transparent;
position: absolute;
top: 5px;
left: -10px;
z-index: 2;
}
.bubble-tip::after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #c5c5c5 transparent transparent;
position: absolute;
top: 5px;
left: -11px;
z-index: 1;
}
</style>
<div class="bubble-tip"></div>
效果如下：
卡券贴
在CSS3当中，background添加了background-size属性，控制背景图片的大小，配合background-position属性，可以在一个背景下面展示多张图片。
卡券贴的核心是使用透明白色径向渐变radial-gradient，分别让4张背景图中的左下角、右下角、右上角和左下角出现缺省，再利用drop-shadow实现元素阴影，从而达到效果。
radial-gradient语法如下：
radial-gradient(shape size at position, 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 | 用于指定渐变的起止颜色。 |
<style>
.coupon{
width: 200px;
height: 80px;
background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right / 50{46ef1d7cfbdffc0db57029f974d30095d18ea60dba1d7b2ffaf442b213727085} 40px no-repeat,
radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50{46ef1d7cfbdffc0db57029f974d30095d18ea60dba1d7b2ffaf442b213727085} 40px no-repeat,
radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50{46ef1d7cfbdffc0db57029f974d30095d18ea60dba1d7b2ffaf442b213727085} 40px no-repeat,
radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50{46ef1d7cfbdffc0db57029f974d30095d18ea60dba1d7b2ffaf442b213727085} 40px no-repeat;
filter: drop-shadow(3px 3px 3px #c5c5c5);
}
</style>
<div class="coupon"></div>
效果如下：
这篇关于CSS写三角形、五角形等不规则图形的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
