CSS---利用伪类绘制倒三角形
2016-06-09 20:47
423 查看
<html> <head> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{ position: relative; width: 100px; height: 100px; background: #f00; } .box:after{ position: absolute; left: 0; bottom: 0; content: ''; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 10px solid #fff; } </style> </head> <body> <div class="box"></div> </body> </html>
相关文章推荐
- 前端学习_Series1_02.CSS3新增知识
- 获取元素CSS值之getComputedStyle方法熟悉
- 电商之梳理css3相关知识---前端技术
- 电商之梳理css相关知识---前端技术
- css3实现的三种loading动画(转载)
- CSS之颜色英文代码全集
- CSS3——让最后一行显示省略号
- js+css3实现一个环形进度条插件
- 自定义添加标注(大头针)样式,并使其适应屏幕
- CSS各种居中方法
- (9)css 链接
- MVC4怎么设置@Html.TextBoxFor这样的样式
- MVC 通过BundleConfig 将JS和CSS文件引入到视图中
- 定制椭圆形状
- CSS clip:rect用法
- 记一次css属性覆盖的问题
- PS切片高级教程
- CSS3基础总结
- safari 浏览器不支持input 样式
- [CSS] Targeting Elements with CSS Attribute Selectors