Как создать прозрачный треугольник с рамкой с помощью CSS?

Как я могу создать следующую форму с помощью CSS?

Введите здесь описание изображения

Я попробовал это как решение:

 .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;
    }

Вы можете увидеть, как это работает в Triangle. Это работает, но с уловкой границ. Есть ли другой способ сделать это?

Используя векторы SVG, это можно сделать легко, но я не хочу идти таким длинным путем.

html css css-shapes

Manoz 26.04.2013 источник

comment

Только с помощью CSS? А с прозрачным корпусом? - Bigood 26.04.2013

comment

apps.eky.hk/css-triangle-generator - Dipesh Parmar 26.04.2013

comment

hedgerwow.appspot.com/demo/arrows - Dipesh Parmar 26.04.2013

comment

jonrohan.me/guide/css/creating-triangles-in-css - Dipesh Parmar 26.04.2013

comment

@Bigood: Да, только с CSS, потому что я знаю, что использование графики SVG довольно долго. - Manoz 26.04.2013

comment

@Manoz Вам нужны только границы вашего треугольника? - Bigood 26.04.2013

comment

@Бигуд: да! Я думаю, что поглаживания сделают это? не так ли? - Manoz 26.04.2013

comment

Если серьезно, то SVG — наиболее подходящее решение. Да, с помощью CSS можно добиться очень умных вещей, но SVG предназначен для рисования произвольных фигур; CSS нет. Ирония в том, что вы обесцениваете SVG, потому что думаете, что это сложно, но на самом деле это не так. Это честно довольно легко. Конечно, SVG может стать сложным, если вы рисуете сложные фигуры, но простой треугольник не является сложным; для рисования треугольника требуется меньше кода SVG, чем CSS, и код легче понять. - Spudley 26.04.2013

Ответы (9)

arrow_upward
16
arrow_downward

Я нашел решение только для webkit, используя ▲ символ:

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

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

Дополнительно:

Справочник по использованию для text-stroke – по состоянию на 2019 г. поддерживаются все основные браузеры
Статья CSS-трюки
Полезные формы HTML

Bigood 26.04.2013

comment

@Bigood: это лучшее решение, которое я получаю в этом вопросе, и сложное;) - Manoz; 26.04.2013

comment

@Manoz Даже Самуэль был хорош, он получил мой голос, так как это будет кросс-браузер, а этого нет, но это действительно круто - Mr. Alien; 26.04.2013

comment

@softvar Конечно, но я не буду публиковать это здесь. Пожалуйста, задайте новый вопрос, и я постараюсь ответить на него быстро. - Bigood; 27.12.2013

arrow_upward
9
arrow_downward

Версия 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;
}

Добавление белого треугольника внутрь черного: http://jsfiddle.net/samliew/Hcfsx/

Community 26.04.2013

arrow_upward
7
arrow_downward

Вот идея с использованием нескольких фонов и linear-gradient:

.triangle {
  width:100px;
  height:100px;
  
  background:
    /* Left side */
    linear-gradient(to bottom left,
      transparent 49.5%,#000 50% calc(50% + 10px),
      transparent calc(50% + 11px)) right/50% 100%,
    /* right side */
    linear-gradient(to bottom right,
      transparent 49.5%,#000 50% calc(50% + 10px),
      transparent calc(50% + 11px)) left/50% 100%,
    /* bottom side*/
    linear-gradient(#000,#000) bottom/calc(100% - 20px) 10px;
  background-repeat:no-repeat;
}

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

Вы можете рассмотреть переменные CSS, чтобы легко настроить форму:

.triangle {
  --t:10px;  /* Thickness */
  --c:black; /* Color */

  width:100px;
  height:100px;
  display:inline-block;
  
  background:
    /* Left side */
    linear-gradient(to bottom left,
      transparent 49.5%,var(--c) 50% calc(50% + var(--t)),
      transparent calc(50% + var(--t) + 1px)) right/50% 100%,
    /* right side */
    linear-gradient(to bottom right,
      transparent 49.5%,var(--c) 50% calc(50% + var(--t)),
      transparent calc(50% + var(--t) + 1px)) left/50% 100%,
    /* bottom side*/
    linear-gradient(var(--c),var(--c)) bottom/calc(100% - 2*var(--t)) var(--t);
  background-repeat:no-repeat;
}

body {
 background:pink;
}

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

<div class="triangle" style="--t:5px;--c:blue;width:150px"></div>

<div class="triangle" style="--t:8px;--c:red;height:150px"></div>

<div class="triangle" style="--t:15px;--c:green;width:80px"></div>

Другой синтаксис с меньшим градиентом:

.triangle {
  --t:10px;  /* Thickness */
  --c:black; /* Color */

  width:100px;
  height:100px;
  display:inline-block;
  border:var(--t) solid transparent;
  border-bottom-color:var(--c);
  background:
    /* Left side */
    linear-gradient(to bottom left,
      transparent 49.5%,var(--c) 50% calc(50% + var(--t)),
      transparent calc(50% + var(--t) + 1px)) right,
    /* right side */
    linear-gradient(to bottom right,
      transparent 49.5%,var(--c) 50% calc(50% + var(--t)),
      transparent calc(50% + var(--t) + 1px)) left;
  background-size:50% 100%;
  background-origin:border-box;
  background-repeat:no-repeat;
}

body {
 background:pink;
}

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

<div class="triangle" style="--t:5px;--c:blue;width:150px"></div>

<div class="triangle" style="--t:8px;--c:red;height:150px"></div>

<div class="triangle" style="--t:15px;--c:green;width:80px"></div>

Вы можете рассмотреть ту же идею для создания прямоугольного треугольника:

.triangle {
  --t:10;  /* Thickness */
  --c:black; /* Color */

  width:100px;
  height:100px;
  display:inline-block;
  border:calc(var(--t)*1px) solid transparent;
  border-image:
    linear-gradient(to bottom left,
      transparent 49.5%,var(--c) 50%) var(--t);
  background:
    /* Left side */
    linear-gradient(to bottom left,
      transparent 49.5%,var(--c) 50% calc(50% + var(--t)*1px),
      transparent calc(50% + var(--t)*1px + 1px));
  background-origin:border-box;
  background-repeat:no-repeat;
}

body {
 background:pink;
}

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

<div class="triangle" style="--t:5;--c:blue;width:150px"></div>

<div class="triangle" style="--t:8;--c:red;height:150px"></div>

<div class="triangle" style="--t:15;--c:green;width:80px"></div>

Если вам нужен равносторонний треугольник, просто сохраните соотношение между шириной и высотой, используя исходный код.

.triangle {
  --t:10px;  /* Thickness */
  --c:black; /* Color */

  width:100px;
  display:inline-block;
  border:var(--t) solid transparent;
  border-bottom-color:var(--c);
  background:
    /* Left side */
    linear-gradient(to bottom left,
      transparent 49.5%,var(--c) 50% calc(50% + var(--t)),
      transparent calc(50% + var(--t) + 1px)) right,
    /* right side */
    linear-gradient(to bottom right,
      transparent 49.5%,var(--c) 50% calc(50% + var(--t)),
      transparent calc(50% + var(--t) + 1px)) left;
  background-size:50% 100%;
  background-origin:border-box;
  background-repeat:no-repeat;
}

.triangle:before {
  content:"";
  display:block;
  padding-top:86.6%;
}

body {
 background:pink;
}

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

<div class="triangle" style="--t:5px;--c:blue;width:150px"></div>

<div class="triangle" style="--t:8px;--c:red;width:50px"></div>

<div class="triangle" style="--t:15px;--c:green;width:80px"></div>

Связанный ответ для получения более подробной информации о расчете: Как работают треугольники CSS?

Temani Afif 06.06.2019

arrow_upward
6
arrow_downward

Попробуйте использовать 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>

Вот руководство

Sowmya 26.04.2013

comment

@Bigood Это не упоминалось в вопросе. Мой ответ старше его комментария - Sowmya; 26.04.2013

comment

+1, потому что SVG - гораздо более подходящее решение, даже если это не то, о чем на самом деле просил OP. Кроме того, ОП явно ошибается в отношении SVG - приведенный здесь ответ вряд ли можно назвать длинным. - Spudley; 26.04.2013

arrow_upward
4
arrow_downward

Вы можете использовать описанный здесь метод: Как этот треугольник CSS shape work? с повернутым псевдоэлементом. Затем вы можете добавить границу к повернутому псевдоэлементу, чтобы создать нужный эффект.

Вы также можете использовать эту технику для отображения треугольника с границами над изображением, градиентом или любым непростым фоном:

ДЕМО

.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>

web-tiki 25.03.2015

arrow_upward
3
arrow_downward

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

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

Это будет треугольник вершиной вверх. Не указывайте границу в ту сторону, куда вам нужно ее указать.

Выше показан равносторонний треугольник. Удалите border-left, чтобы получился прямоугольный треугольник.

sakthi 26.04.2013

comment

Треугольник, о котором идет речь, полый, а этот сплошной. - Will; 09.01.2020

arrow_upward
3
arrow_downward

Попробуйте использовать элемент <canvas>. Я строю простой треугольник на jsfiddle - пока ничего особенного.

    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>

Imperative 26.04.2013

arrow_upward
0
arrow_downward

Я нашел хорошее решение, немного сложное, но для меня это был самый простой способ сделать это: ссылка на кодовая ручка

.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;

}

NNH 12.09.2018

arrow_upward
0
arrow_downward

Также можно рассмотреть clip-path:

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

чтобы помочь вам создать свой clip-path, вы можете использовать этот онлайн-инструмент https://bennettfeely.com/clippy/

G-Cyrillus 20.07.2021

Как создать прозрачный треугольник с рамкой с помощью CSS?

Ответы (9)

Вопросы по теме