三角形
利用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% 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); } </style> <div class="coupon"></div>
效果如下: