如何用CSS創(chuàng)建下面的形狀？

我試著用這個(gè)來解決問題:

.triangle:after {
        position:absolute;
        content:"";
        width: 0;
        height: 0;
        margin-top:1px;
        margin-left:2px;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid white;
    }

    .triangle:before {
        position:absolute;
        content:"";
        width: 0;
        height: 0;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 12px solid black;
    }

你可以看到它在三角形工作。這是可行的，但是有一個(gè)邊界的詭計(jì)。有沒有別的方法可以做這件事？

使用SVG向量可以很容易地做到這一點(diǎn)，但我不想走那條漫長(zhǎng)的路。

我發(fā)現(xiàn)了一個(gè)只有webkit的解決方案，使用& # 9650；字符:

.triangle {
  -webkit-text-stroke: 12px black;
  color: transparent;
  font-size: 200px;
}

<div class="triangle">&#9650;</div>

CSS-邊框版本:

.triangle {
    position: relative;
    width:0;
    border-bottom:solid 50px black;
    border-right:solid 30px transparent;
    border-left:solid 30px transparent;
}
.triangle .empty {
    position: absolute;
    top:9px;
    left:-21px;
    width:0;
    border-bottom:solid 36px white;
    border-right:solid 21px transparent;
    border-left:solid 21px transparent;
}

在黑色的三角形里面加上一個(gè)白色的三角形:http://jsfiddle.net/samliew/Hcfsx/

除了下面使用漸變的答案，我還有一個(gè)多邊形的在線生成器，你可以在那里得到一個(gè)只有邊界的三角形:https://css-generators.com/polygon-shape/

.box {
  width: 200px;
  aspect-ratio: 1;
  clip-path: polygon(93.30% 75.00%,6.70% 75.00%,50.00% 0.00%,93.30% 75.00%,calc(50.00% - -0.00px) calc(0.00% - -35.00px),calc(6.70% - -30.31px) calc(75.00% - 17.50px),calc(93.30% - 30.31px) calc(75.00% - 17.50px),calc(50.00% - -0.00px) calc(0.00% - -35.00px));
  background: red;
}

<div class="box"></div>

嘗試使用SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

這是教程

你可以使用我在這里描述的方法:這個(gè)CSS三角形是如何工作的？帶有旋轉(zhuǎn)的偽元素。然后，您可以向旋轉(zhuǎn)后的偽元素添加邊框，以創(chuàng)建您想要的效果。

您也可以使用這種技術(shù)在圖像、漸變或任何非普通背景上顯示帶邊框的三角形:

演示

.tr{
  width:40%;
  padding-bottom: 28.28%; /* = width / sqrt(2) */
  position:relative;
  border-bottom: 6px solid rgba(0,0,0,0.8);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  overflow:hidden;
}
.tr:before{
  content:'';
  position:absolute;
  bottom:0; left:0;
  width:100%; height:100%;
  border-top:6px solid rgba(0,0,0,0.8);
  border-left:6px solid rgba(0,0,0,0.8);
  
  -moz-box-sizing:border-box;
  box-sizing:border-box;
    
  -webkit-transform-origin:0 100%;
  -ms-transform-origin:0 100%;
  transform-origin:0 100%;
    
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/* FOLLOWING JUST FOR THE DEMO */
body{background:url('https://picsum.photos/id/100/1000/1000');background-size:cover;}

<div class="tr"></div>

考慮使用& lt畫布& gt元素。我在jsfiddle上構(gòu)建了一個(gè)簡(jiǎn)單的三角形——還沒什么特別的。

var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    context.beginPath();
    context.moveTo(10, 0);
    context.lineTo(20, 20);
    context.lineTo(0, 20);
    context.closePath();
    context.fill();

<canvas id="myCanvas" width="20" height="20"></canvas>

.triangle{
        width:0;
        border-bottom:solid 30px black;
        border-right:solid 30px transparent;
        border-left:solid 30px transparent;
    }

<div class="triangle">
    </div>

還可以考慮修剪路徑:

html {
  /* init size and shape to the triangle*/
  --base: 155px;
  --ratio: 1;
  /* try too 0.71*/
  ;
}

[data-triangle] {
  width: var(--base);
  height: calc(var(--base) * var(--ratio));
  clip-path: polygon( 0 100%, 50% 0, 100% 100%, 94% 96%, 50% 8%, 6% 96%, 96% 96%, 100% 100%);
  background: gray;
}


/* demo makup */

html {
  display: grid;
  min-height: 100vh;
}

body {
  background: repeating-linear-gradient(45deg, silver 0, #444, gold, blue, lime, tomato, purple, gray 5em) 0 0 / 100% 100%;
  margin: auto;
  text-align: center;
  box-shadow: inset 0 0 0 100vw rgba(0, 0, 0, 0.5), 0 0 0 100vw rgba(0, 0, 0, 0.5);
  color:gray
}

[data-triangle] {
  transition: 1s;
}

body:hover [data-triangle]{
  background: black;
}

body:hover {
  filter: drop-shadow(0 0 1px gold)drop-shadow(0 0 1px white)drop-shadow(0 0 1px white)drop-shadow(0 0 1px white)drop-shadow(0 0 1px white)drop-shadow(0 0 10px white);
  /*make that triangle obvious over that funny gradient*/
  color: transparent;
  box-shadow: 0 0;
}


}

<div data-triangle></div>
hover to highlight

我找到了一個(gè)不錯(cuò)的解決方案，有點(diǎn)棘手，但對(duì)我來說這是最簡(jiǎn)單的方法: 鏈接到代碼筆

.triangle {
position: absolute;
margin: auto;
top: -70px;
left: 0;
right: 0;
width: 137px;
height: 137px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
border-right: 4px solid #e74c3c;
border-bottom: 4px solid #e74c3c;

}