您的位置：首页 > Web前端 > CSS

CSS实现三角形方法二--border+content

2015-10-23 14:57 555 查看

方法说明：

1、将一个div块的内容设置为空(content=" "),

2、设置它的边框（上下左右）颜色为透明（transparent），

3、设置它的左侧边框颜色为pink。

tips：一个没有内容的div的上下左右的边框形状是下面这个样子的：

左右边框是三角形、上下边框是梯形。

具体代码如下：

html：

<body>
<div class="test"></div>
</body>

css:

<style type="text/css">
.test{
content: ' ';
border:50px solid transparent;
border-left-color:pink;
}
</style>

扩展：像下图右侧灰色的三角形可以按照这个方法来做，只要再多加一步，把三角形定位到合适的位置，然后进行翻转（tranform：rotate（））、变形（transform：skew（））就可以了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航