css 实现三角形
#demo1 { width: 0; height: 0; border-top: 100px solid rgba(255, 0, 0, 1); border-bottom: 50px solid rgba(0, 128, 0, 1); border-left: 50px solid rgba(0, 0, 255, 1); border-right: 50px solid rgba(128, 128, 128, 1) }
#demo2 { width: 200px; height: 100px; background: linear-gradient(45deg, rgba(255, 0, 0, 1), rgba(255, 0, 0, 1) 70.72px, rgba(0, 128, 0, 1) 70.72px, rgba(0, 128, 0, 1) 200px) }
#demo3 { width: 200px; height: 100px }
#demo4 { width: 300px; height: 100px; position: relative; overflow: hidden }
#demo4::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 0, 0, 1); transform-origin: left bottom; transform: rotate(65deg) }
#demo5 { width: 100px; height: 100px; background: rgba(255, 0, 0, 1); clip-path: polygon(0 0, 50px 0, 0 100px, 0 0) }
#demo7 { width: 0; height: 0; border-top: 100px solid rgba(255, 0, 0, 1); border-bottom: 50px solid rgba(0, 128, 0, 1); border-left: 50px solid rgba(0, 0, 255, 1); border-right: 50px solid rgba(128, 128, 128, 1); transform: rotate(45deg) }
#demo8 { width: 0; height: 0; border-top: 100px solid rgba(255, 0, 0, 1); border-bottom: 50px solid rgba(0, 0, 0, 0); border-left: 50px solid rgba(0, 0, 0, 0); border-right: 50px solid rgba(0, 0, 0, 0); transform: rotate(45deg) }
#demo9 { width: 0; height: 0; border-top: 100px solid rgba(255, 0, 0, 1); border-bottom: 50px solid rgba(0, 0, 0, 0); margin-bottom: -50px; border-left: 50px solid rgba(0, 0, 0, 0); border-right: 50px solid rgba(0, 0, 0, 0); transform: rotate(45deg) }
#demo10 { width: 100px; height: 100px; border: 1px solid rgba(0, 128, 0, 1) }
盒模型中的div默认是一个矩形。那么我们怎么实现三角形呢。
使用字符中的符号。这个跟字体相关，在布局上基本没什么用。
矩形沿着一个角用斜线切一刀就可以得到三角形
一、怎么实现切一刀呢?
1、宽高为0的矩形。设置边框。可以将矩形分为四个三角形。
#demo1 {
width: 0;
height:0;
border-top: 100px solid red;
border-bottom: 50px solid green;
border-left: 50px solid blue;
border-right: 50px solid grey;
}
2、使用无过渡线性渐变的方式
#demo2 {
width: 200px;
height: 100px;
background: linear-gradient(45deg, red, red 70.72px, green 70.72px, green 200px);
}
3、使用角向渐变
#demo3 {
width: 200px;
height: 100px;
background: conic-gradient(from 90deg at 0 0, red 0, red 10deg, green 10deg);
}
4、使用旋转出父元素，超出隐藏的方式。
#demo4 {
width: 300px;
height: 100px;
position: relative;
overflow: hidden;
}
#demo4::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: red;
transform-origin: left bottom;
transform: rotate(65deg);
}
5、css裁剪属性
#demo5 {
width: 100px;
height: 100px;
background: red;
clip-path: polygon(0 0, 50px 0, 0 100px, 0 0);
}
二、怎么实现角度呢？
使用 rotate ，实现不同角度
#demo7 {
width: 0;
height: 0;
border-top: 100px solid red;
border-bottom: 50px solid green;
border-left: 50px solid blue;
border-right: 50px solid grey;
transform: rotate(45deg);
}
三、移除不必要的部分
例1-例3中把不要的部分颜色设置为transparent就可以了。
#demo8 {
width: 0;
height: 0;
border-top: 100px solid red;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
transform: rotate(45deg);
}
四、调整占位
如上的方式实现三角形后，在流中，会额外占用一部分位置。需要调整一下，这里根据具体需求来，例1中使用margin-bottom将不需要的border-bottom占用的50px拉回去。
下面的例子还存在着旋转导致的位置偏移。所以拉回去50px的效果依然不理想。这里需要根据实际的需求来调整了。没有一个完美的方案。
#demo9 {
width: 0;
height: 0;
border-top: 100px solid red;
border-bottom: 50px solid transparent;
margin-bottom:-50px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
transform: rotate(45deg);
}
#demo10 {
width: 100px;
height: 100px;
border:1px solid green;
}
最新文章
- 初识Spring
- SqlException 当前命令发生了严重错误 应放弃任何可能产生的结果
- C++ 异常机制
- Oracle学习笔记（二）
- 第十三周学习笔记（编辑器选错了重发了这一个 原博客的确周天晚上提交了orz）
- Conntect Bluetooth devices in iOS.
- SVN版本管理trunk及branch相关merge操作
- python单元测试之unittest
- Java学习之List接口
- table表格边框样式
- Latex 文本编辑技巧
- obj-c编程10:Foundation库中类的使用(5)[时间对象]
- 【将门创投】AI 往期技术分享
- linux异常处理：selinux配置错误导致无法重启
- （string高精度）A + B Problem II hdu1002
- node.js+express，实现RESTful API
- SharePoint 2010/2013: List view Lookup threshold uncovered
- Spring Boot - Building RESTful Web Services
- java第四天
- C# HttpClient 请求转发