怎么利用CSS3绘制三角形
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么利用CSS3绘制三角形相关的知识，希望对你有一定的参考价值。
参考技术A 绘制三角形的原理就是让一个块元素没有宽度和高度，只设置边框，通过让其他三遍transparent就可以实现三角形，这并不是CSS3才能做得。如果一定要CSS3的话，可以看一下CSS3的形变是否可以实现。利用CSS怎样写出三角形利用CSS+DIV怎样写
参考技术A <!doctype html><html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.a
border-bottom:1px solid #aaa;
height:50px;
width:100px;
position:relative;
overflow:hidden;
.b
position:absolute;
display:block;
top:0px;
left:0px;
width:100px;
height:50px;
.b i,.b em
position:absolute;
left:0px;
bottom:0px;
border-color:transparent;
border-color:rgba(255,255,255,0);
border-style:solid;
border-width:0 50px 50px 50px;
.b i
border-bottom-color:#aaa;
.b em
border-bottom-color:#FFF;
bottom:-1px;
.text
position:absolute;
bottom:10px;
background:none;
border:none;
outline:none;
text-align:center;
width:100%;
</style>
</head>
<body>
<div class = "a">
<span class = "b">
<i></i>
<em></em>
</span>
</div>
</body>
</html> 参考技术B 用after尾类，在你要设置剪头的快后面设置after尾类样式
div
position：relative
div:after
content:"";
position：absolute；
top：“”；
left：“”；
font-size: 0;
line-height: 0;
border-width: 10px;
border-color: red;
border-bottom-width: 0;
border-style: dashed;
border-top-style: solid;
border-left-color: transparent;
border-right-color: transparent;
参考技术C 在网上搜一下会有很多的介绍
以上是关于怎么利用CSS3绘制三角形的主要内容，如果未能解决你的问题，请参考以下文章