html中如何写不规则图形,CSS写三角形、五角形等不规则图形

写页面的时候时长遇到一些奇怪图形，用css是可以实现各种不规则图形的，下面举例几个常用的：

一、三角形

利用border-color支持transparent这一特性，隐藏三条边框，实现三角形。

.triangle {

width: 0;

height: 0;

border-style: solid;

box-sizing: border-box;

border-width: 0 10px 10px;

border-color: transparent transparent #c5c5c5 transparent;

}

效果如下：

二、左上三角形

.left-top-triangle {

width: 0;

height: 0;

border-style: solid;

box-sizing: border-box;

border-width: 10px;

border-color: #c5c5c5 transparent transparent #c5c5c5;

}

效果如下：

三、正五边形

.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;

}

效果如下：

气泡框

使用绝对定位进行三角形覆盖，实现气泡框突出部分。

.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;

}

效果如下：

卡券贴

在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用于指定渐变的起止颜色。

.coupon{

width: 200px;

height: 80px;

background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right / 50% 40px no-repeat,

radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 40px no-repeat,

radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 40px no-repeat,

radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 40px no-repeat;

filter: drop-shadow(3px 3px 3px #c5c5c5);

}

效果如下：