1、border
div{
width:0;
height:0;
margin:0auto;
border:100pxsolid;
border-color:transparenttransparentredtransparent;
}
border
2、裁剪
div{
width:100px;
height:100px;
margin:0auto;
background:red;
clip-path:polygon(50%50%,100%100%,50%100%,0100%);
}
裁剪
3、线性渐变+旋转
div{
width:100px;
height:100px;
margin:0auto;
background:linear-gradient(tobottomright,#ff000050%,transparent50%);
transform:rotate(45deg);
}
线性渐变+旋转
4、锥形渐变
div{
width:100px;
height:100px;
margin:0auto;
background:conic-gradient(from135deg,red90deg,transparent90deg);
}
锥形渐变
5、svg（此处仅列举三种）
<!-- d设置绘制点的位置（M = moveto,L = lineto,H = horizontal lineto,V = vertical lineto,C = curveto,S = smooth curveto,Q = quadratic Bézier curve,T = smooth quadratic Bézier curveto,A = elliptical Arc,Z = closepath） fill设置填充颜色 -->
<svgxmlns="http://www.w3.org/2000/svg"version="1.1"width="100"height="100">
<pathd="M50 50 L100 100 L0 100 Z"fill="red"></path>
</svg>
<!-- points表示多个点的坐标，每个点用空格分离 -->
<svgxmlns="http://www.w3.org/2000/svg"version="1.1"width="100"height="100">
<polygonpoints="50,50 100,100 0,100"fill="red"></polygon>
</svg>
<!-- polyline 还可以通过stroke，stroke-width设置线段颜色，宽度等 -->
<svgxmlns="http://www.w3.org/2000/svg"version="1.1"width="100"height="100">
<polylinepoints="50,50 100,100 0,100"fill="red"></polyline>
</svg>
svg
6、canvas
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>canvas画三角形</title>
</head>
<body>
<!-- 创建画布并设置宽、高、边框等基本样式便于观察 -->
<canvasid="myCanvas"width="100"height="100"style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<scripttype="text/javascript">
// 获取画布
letmyCanvas=document.getElementById("myCanvas");
// 获取context绘画对象（获取渲染上下文）
letctx=myCanvas.getContext("2d");
// 创建路径
ctx.beginPath();
// 移动画笔到指定坐标（x, y）,相当于路径起始点
ctx.moveTo(50,50);
// 添加一个新点，然后在画布中创建从该点到最后指定点的线条
ctx.lineTo(100,100);
// 添加一个新点，然后在画布中创建从该点到最后指定点的线条
ctx.lineTo(0,100);
// 可选步骤，创建从当前点回到起始点的路径（关闭绘制的路径）
// ctx.closePath();
// 设置填充颜色
ctx.fillStyle="red";
// 填充闭合区域。如果path没有闭合，则fill()会自动闭合路径
ctx.fill();
// stroke 绘制边框，需和 closePath 配合使用
// ctx.stroke();
</script>
</body>
</html>
canvas
网友评论