CSS实现三角的三种方式
三边框方式
.triangle {
width: 0;
height: 0;
border: 100px solid;
border-color: orangered skyblue gold yellowgreen;
}
想要哪个就让其他的变为透明
两边框方式
注意：这样的三角形宽高就是border的width
逻辑很简单，把其拆分为两块，如果选left，那么就要让top或者bottom透明，下面这个是bottom有，因此让top透明
①
.triangle {
margin-top: 300px;
width: 0;
height: 0;
border-left: 100px solid skyblue;
border-top: 100px solid transparent;
}
②
.triangle {
margin-top: 300px;
width: 0;
height: 0;
border-top: 100px solid skyblue;
border-left: 100px solid transparent;
}
③
这个也可以看出left有 bottom透明 效果是一样的
.triangle {
margin-top: 300px;
width: 0;
height: 0;
border-top: 100px solid skyblue;
border-right: 100px solid transparent;
}
④
.triangle {
margin-top: 300px;
width: 0;
height: 0;
border-bottom: 100px solid skyblue;
border-left: 100px solid transparent;
}
clip-path
这是c3新增属性，专门用来画多边形的
语法：
支持:inset(矩形) || circle(圆形) || ellipse(椭圆) || polygon(多边形)
- 圆
circle(半径 at 圆心坐标在容器中的位置)
.triangle {
width: 400px;
height: 400px;
clip-path: circle(200px at 50% 50%);
background-color: red;
}
clip-path: circle(200px at 100% 100%); //圆心在右下角
svg
线
<svg>
<line x1="0" y1="30" x2="300" y2="30" stroke-width="20" stroke="red" stroke-dasharray="300,320" />
</svg>
效果：
常用属性
| 属性 | 值 | 作用 |
|---|---|---|
| fill | none||‘red’ | svg图片填充色 |
| stroke | 'red' | svg图片边框颜色 |
| stroke-width | number +'px' | svg边框宽度 |
| stroke-dasharray | number +'px' | 如果是单个值，10px,表示虚线长和间隙都是10px 如果是：10px 20px,表示虚线长10px间隙长20px，且以此循环 |
| stroke-dashoffset | number+'px' | 如果是负值，整体向右偏移，因此会有从左向右缩小的效果。如果是 正值，整体向左偏移，因此会有从右向左缩小的效果 |
圆
<svg height="50" width="50" viewBox="0 0 50 50">
<circle id="circle" cx="25" cy="25" r="20"></circle>
</svg>
常用属性
| 属性 | 值 | 作用 |
|---|---|---|
| fill | none||‘red’ | svg图片填充色 |
| stroke | 'red' | svg图片边框颜色 |
| stroke-width | number +'px' | svg边框宽度 |
| stroke-dasharray | number +'px' | 如果是单个值，10px,表示虚线长和间隙都是10px 如果是：10px 20px,表示虚线长10px间隙长20px，且以此循环。 注意：圆形是以x轴右边开始 顺时针画第一条虚线 然后间隔 然后再画虚线 |
| stroke-dashoffset | number+'px' | dashoffset如果是负值，那么是从右边开始顺时针偏移。如果是 正值，那么也是从右边点位开始逆时针偏移 |
实现loading加载效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#circle {
fill: none;
stroke: skyblue;
stroke-width: 2px;
stroke-dasharray: 100px 140px; /* 注意：圆形是以x轴右边开始画第一条虚线 然后间隔 然后再画虚线*/
animation: loading-circle 1.4s ease-in-out infinite;
stroke-dashoffset: 0px; /* 如果是负值，整体向右偏移，因此会有从左向右缩小的效果
如果是正值，整体向左偏移，因此会有从右向左缩小的效果
对于圆来说：dashoffset如果是负值，那么是从右边开始顺时针偏移，因为是从右边开始的，所以会出现空白
如果是正值，那么也是从右边开始逆时针偏移
*/
}
/* 线由生成到消失 */
@keyframes loading-circle {
0% {
stroke-dasharray: 1px 140px; /* 初始时，虚线长1px 间隔为200px 因为圆的周长是120px所以隐藏成功，只有一个1px的点 */
}
30% {
stroke-dasharray: 100px 140px; /* 中旬时，让其虚线长为100px，间隔依然是140px，即实现一个增长的效果*/
stroke-dashoffset: -15px; /* 让其整体向右偏移15px，所以虚线会消失15px，因为是从右开始生成的 */
}
100% {
stroke-dasharray: 100px 140px;
stroke-dashoffset: -140px;
}
}
.circle-container {
width: 50px;
height: 50px;
animation: rotate-circle 1.4s ease-in-out infinite;
}
@keyframes rotate-circle {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="circle-container">
<svg height="50" width="50" viewBox="0 0 50 50">
<circle id="circle" cx="25" cy="25" r="20"></circle>
</svg>
</div>
</body>
</html>
