方法说明:
1、将一个div块的内容设置为空(content=" "),
2、设置它的边框(上下左右)颜色为透明(transparent),
3、设置它的左侧边框颜色为pink。
tips:一个没有内容的div的上下左右的边框形状是下面这个样子的:
左右边框是三角形、上下边框是梯形。
具体代码如下:
html:
css:
扩展:像下图右侧灰色的三角形可以按照这个方法来做,只要再多加一步,把三角形定位到合适的位置,然后进行翻转(tranform:rotate())、变形(transform:skew())就可以了