使用before、after伪类制作三角形
2014-04-10 09:08
330 查看
使用before、after伪类实现三角形的制作，不需要再为三角形增加不必要的DOM元素，影响阅读。
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
div:before,
div:after{
content: "";
position: absolute;
top: 40px;
left: 100px;
width: 0px;
height: 0px;
border: 10px solid transparent;
border-left-color: rgb(255,255,255);
}
div:before{
top: 39px;
border: 11px solid transparent;
border-left-color: #ccc;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
div:before,
div:after{
content: "";
position: absolute;
top: 40px;
left: 100px;
width: 0px;
height: 0px;
border: 10px solid transparent;
border-left-color: rgb(255,255,255);
}
div:before{
top: 39px;
border: 11px solid transparent;
border-left-color: #ccc;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 伪类选择器 before 和after的使用 实例 制作圆角
- 前端（各种demo）一：css实现三角形，css实现梯形，pop弹层，css伪类before，after使用，svg使用（持续更新中）
- CSS基础-03 伪类,伪元素,before和after使用案例
- CSS伪类before，after制作左右横线中间文字效果
- css伪类 :before和 :after的使用详解 以及实现的一些效果
- 利用:before和:after伪类制作CSS3 圆形按钮 含demo
- 伪类：before和：after的使用
- css伪类 :before和:after的使用
- JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove的使用
- 【jQuery】使用before()和after()在元素前后插入内容
- 学习使用：before和：after伪元素
- CSS伪类:before 和 :after
- 触发器（二、BEFORE和AFTER的区别及使用场景）
- 使用border制作的css三角形
- css 中的伪类选择器before 与after
- CSS伪元素BEFORE、AFTER妙用：制作时尚焦点图相框
- 关于伪类元素:before和:after
- CSS伪类:before在元素之前 :after 在元素之后实例讲解
- ::after,::before使用
- css3的伪类before和after