博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS实现三角形方法二--border+content
阅读量:5323 次
发布时间:2019-06-14

本文共 323 字,大约阅读时间需要 1 分钟。

方法说明:

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

2、设置它的边框(上下左右)颜色为透明(transparent),

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

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

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

具体代码如下:

html:

    

css:

 

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

 

 

转载于:https://www.cnblogs.com/shenfangfang/p/4904549.html

你可能感兴趣的文章
php中的isset和empty的用法区别
查看>>
把word文档中的所有图片导出
查看>>
ubuntu 18.04取消自动锁屏以及设置键盘快捷锁屏
查看>>
Leetcode 589. N-ary Tree Preorder Traversal
查看>>
正则表达式
查看>>
arcgis api 4.x for js 结合 Echarts4 实现散点图效果(附源码下载)
查看>>
YTU 2625: B 构造函数和析构函数
查看>>
apache自带压力测试工具ab的使用及解析
查看>>
加固linux
查看>>
10.17动手动脑
查看>>
WPF中Image显示本地图片
查看>>
SQL Server中利用正则表达式替换字符串
查看>>
[poj1006]Biorhythms
查看>>
Hyper-V虚拟机上安装一个图形界面的Linux系统
查看>>
Hover功能
查看>>
js千分位处理
查看>>
Mac---------三指拖移
查看>>
字符串类型的相互转换
查看>>
HTTP状态码
查看>>
iOS如何过滤掉文本中特殊字符
查看>>