使用纯CSS实现给定3点绘制三角形

draw a triangle between 3 points in pure css，本例也适用于2点绘制直线

css, line, triangle

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 471
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100; 500&display=swap");
:root {
    font-family: "Noto Sans", sans-serif;
    box-sizing: border-box;
    font-weight: 100;
}
.tri {
    position: relative;
    display: grid;
    width: 80vw;
    min-height: 80vh;
    --len: 10vmin;
    --y1: 10;
    --x1: 30;
    --y2: 15;
    --x2: 40;
    --y3: 25;
    --x3: 20;
}
.tri .pt1,
.tri .pt2,
.tri .pt3 {
    background-color: rgba(255, 140, 102, 0.5);
    position: absolute;
    width: 10px;
    height: 10px;
    top: calc(var(--y1) * 1vmin);
    left: calc(var(--x1) * 1vmin);
    translate: -50% -50%;
}
.tri .pt2 {
    top: calc(var(--y2) * 1vmin);
    left: calc(var(--x2) * 1vmin);
}
.tri .pt3 {
    top: calc(var(--y3) * 1vmin);
    left: calc(var(--x3) * 1vmin);
}
.tri .line {
    position: absolute;
    width: 0px;
    height: 1px;
    background-color: #3cf;
    transform: scaley(-1);
    transform-origin: 0 100%;
    --angl: calc(atan2(var(--yd), var(--xd)));
}
.tri .line.a {
    top: calc(var(--y1) * 1vmin);
    left: calc(var(--x1) * 1vmin);
    --w: 11.1803398875;
    --yd: calc(var(--y2) - var(--y1));
    --xd: calc(var(--x2) - var(--x1));
    animation: move 0.5s linear forwards;
}
.tri .line.b {
    top: calc(var(--y2) * 1vmin);
    left: calc(var(--x2) * 1vmin);
    --w: 22.360679775;
    --yd: calc(var(--y3) - var(--y2));
    --xd: calc(var(--x3) - var(--x2));
    animation: move 0.5s linear 0.5s forwards;
}
.tri .line.c {
    top: calc(var(--y3) * 1vmin);
    left: calc(var(--x3) * 1vmin);
    --w: 18.0277563773;
    --yd: calc(var(--y1) - var(--y3));
    --xd: calc(var(--x1) - var(--x3));
    animation: move 0.5s linear 1s forwards;
}
@keyframes move {
    to {
        width: calc((var(--w) * 1vmin));
        rotate: var(--angl);
    }
}
body {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    background-color: #1f2020;
}
h1 {
    color: #ebecec;
    font-size: clamp(2rem, 3vw + 1rem, 5rem);
    text-align: center;
    font-weight: 100;
}
.tri {
    border: 1px solid rgba(0, 204, 153, 0.5);
    border-radius: 0 1em 1em 1em;
}
.opt {
    position: absolute;
    top: -1em;
    left: -1em;
    width: 2em;
    height: 2em;
    background-color: rgba(255, 140, 102, 0.2);
    background-image: linear-gradient(45deg, rgba(102, 255, 140, 0.3) 50%, transparent 50%), linear-gradient(-45deg, rgba(140, 102, 255, 0.5) 50%, transparent 50%);
}
.opt:before {
    font-size: 0.8rem;
    color: #e6f9ff;
    position: absolute;
    width: 5em;
    content: "(0, 0)";
    left: 2.5em;
    top: 2.5em;
}
.pt1:before,
.pt2:before,
.pt3:before {
    font-size: 0.8rem;
    color: #e6f9ff;
    position: absolute;
    width: 5em;
}
.pt1:before {
    content: "(30, 10)";
    right: 1rem;
}
.pt2:before {
    content: "(40, 15)";
    left: 1rem;
}
.pt3:before {
    content: "(20, 25)";
    right: 1rem;
}

HTML

draw a triangle between 3 points in pure css，本例也适用于2点绘制直线

css, line, triangle

编辑器支持Emmet

快捷键

draw a triangle between 3 points in pure css，本例也适用于2点绘制直线

css, line, triangle

使用CSS3 clip-path特性实现文本沿特定形状环绕图片

使用CSS3的shape-outside特性实现文本沿特定外形路径环绕效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：