1. border三角形
设置div的width,height均为0,设置四面的border值,想要哪边的三角就设置哪边的border值,把其他边的border值设置为 transparent(透明)
css:
div {
width: 0;
height: 0;
margin: 10px;
}
.all {
border-top: 50px solid #e6e6ae;
border-left: 50px solid #ff976d;
border-bottom: 50px solid #4ceff5;
border-right: 50px solid #d664e6;
}
.left {
border: 50px solid transparent;
border-left: 50px solid #ff976d;
}
.bottom {
border: 50px solid transparent;
border-bottom: 50px solid #4ceff5;
}
.right {
border: 50px solid transparent;
border-right: 50px solid #d664e6;
}
.top {
border: 50px solid transparent;
border-top: 50px solid #e6e6ae;
}
html:
<div class="first">
<div class="all"></div>
<div class="left"></div>
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
这种一般用于消息框:
css:
.big {
width: 100px;
height: 50px;
border-radius: 10px;
background-color: #f35496;
position: relative;
}
.big::after {
position: absolute;
content: "";
right: -20px;
top: 10px;
width: 0;
height: 0;
border: 10px solid transparent;
border-left: 10px solid #f35496;
}
html:<div class="big"></div>
2. linear-gradient 三角形
使用角度,使用渐变定格到50%,然后再把其中一半设置成transparent。
css:
.scoend {
width: 100px;
height: 100px;
background: linear-gradient(
45deg,
rgb(233, 153, 196) 50%,
rgb(119, 229, 243) 50%
);
}
.example1 {
margin-bottom: 10px;
width: 100px;
height: 100px;
background: linear-gradient(
45deg,
rgb(233, 153, 196) 50%,
transparent 50%
);
}
.example2 {
margin-bottom: 10px;
width: 100px;
height: 100px;
background: linear-gradient(
45deg,
transparent 50%,
rgb(153, 233, 233) 50%
);
}
.example3 {
margin-bottom: 10px;
width: 100px;
height: 100px;
background: linear-gradient(
135deg,
transparent 50%,
rgb(218, 191, 243) 50%
);
}
.example4 {
width: 100px;
height: 100px;
background: linear-gradient(
135deg,
rgb(243, 212, 191) 50%,
transparent 50%
);
}
html:
<div class="scoend"></div>
<div class="example1"></div>
<div class="example2"></div>
<div class="example3"></div>
<div class="example4"></div>
常用于选中下标,删除下标等
css:
.item {
width: 100px;
height: 40px;
background-color: #e4e4e4;
text-align: center;
line-height: 40px;
position: relative;
}
.item::after {
position: absolute;
content: "";
width: 6px;
height: 3px;
right: 2px;
bottom: 4px;
border: 1px solid #fff;
border-color: transparent transparent #fff #fff;
transform: rotate(-45deg);
}
.item::before {
position: absolute;
content: "";
width: 20px;
height: 20px;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
transparent 50%,
rgb(94, 129, 243) 50%
);
}
html:
<div class="item">全部</div>
如果不想画这种等腰三角形,用渐变也可以画
只要利用高中数学的三角函数控制好宽高跟旋转的角度
css:
.scoend {
width: 173.2px;
height: 100px;
background: linear-gradient(
30deg,
rgb(233, 153, 196) 50%,
rgb(119, 229, 243) 50%
);
}
只是这种方式不太精确。
3.tramform+rotate 实现
.third {
width: 100px;
height: 50px;
background-color: #abcada;
position: relative;
overflow: hidden;
}
.third::before {
position: absolute;
width: 100px;
height: 50px;
background-color: violet;
content: "";
left: 0;
bottom: 0;
transform-origin: left bottom;
transform: rotate(30deg);
}
旋转后把溢出的隐藏,就能得到这样的三角形啦
4.canvas画图三角形
这种方法不太实用,了解一下就可以了,canvas画图可以画出各种各样的图形。
当你在三角形上右键点击时会显示图片另存为,会把canvas绘制的区域视为图片。
代码:
<canvas id="tutorial" width="300" height="300"></canvas>
<script>
draw();
function draw() {
var canvas = document.getElementById("tutorial");
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.lineTo(200, 200);
ctx.closePath(); //虽然我们只绘制了两条线段,但是closePath会closePath,仍然是一个3角形
ctx.stroke(); //描边。stroke不会自动closePath()
}
draw();
</script>