Треугольник с одним закругленным углом

I want to make only one rounded corner for a triangle but I'm unable to make it.
Here is my code: 

.arrow-left {
  width: 0;
  height: 0;
  border-top: 80px solid transparent;
  border-bottom: 80px solid transparent;
  border-right: 80px solid blue;
}
<div class="arrow-left"></div>

Мне нужно, чтобы угол, указывающий влево, был закруглен, как показано на этом изображении:

Треугольник с закругленным углом


svg css css-shapes
person Shoaib Chikate    schedule 08.04.2014    source источник
comment
Чтобы выглядеть полукругом?   -  person Sarvap Praharanayuthan    schedule 08.04.2014
comment
Смотрите обновленный вопрос.   -  person Shoaib Chikate    schedule 08.04.2014
comment
Проще всего было бы сделать прозрачное наложение png с небольшой белой кривой на левой стороне, которая покрывает кончик треугольника... Вы также можете использовать блок с закругленными краями, повернутый на 45 градусов, со всем, кроме кончика, закрытым непрозрачный раздел.   -  person Christopher Reid    schedule 08.04.2014
comment
аналогичный вопрос только в противоположном направлении - stackoverflow.com/questions/ 11913645/   -  person Pravin Waychal    schedule 08.04.2014
comment
См. эту ручку codepen.io/valentinfarcas/pen/xGrlD   -  person    schedule 08.04.2014
comment
Я бы использовал SVG, вложенный в тег изображения. Это было бы более семантически для графического элемента, чем использование пустых блочных элементов.   -  person Nillervision    schedule 08.04.2014

Ответы (5)


arrow_upward
13
arrow_downward

Я знаю, что это немного хакерски, но я не думаю, что есть простой способ сделать это с помощью одного класса.

Все, что я сделал, это повернул блок на 45 градусов с помощью border-radius:10px, а затем поместил его в другой div с шириной, установленной на желаемую ширину вашей стрелки, и overflow:hidden, чтобы все, что выходит, было невидимым.

.arrow-left {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 20px;
  background: black;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-radius: 10px;
}

.cover {
  position: absolute;
  height: 100px;
  width: 40px;
  overflow: hidden;
}
<div class="cover">
  <div class="arrow-left"></div>
</div>

person Christopher Reid    schedule 08.04.2014
comment
Хороший! Я знал, что вы можете создавать стрелки с помощью некоторых хаков с границами, но я не знал, что вы можете пойти дальше с радиусом границы. Сделал быстрый поиск на caniuse, и поддержка браузера кажется нормальной (кроме ie8, но кому нужна стрелка), caniuse.com/#feat=border-radius - person Robbie Bardijn; 08.04.2014

arrow_upward
14
arrow_downward

Вы можете создать отзывчивый треугольник с одним закругленным углом как минимум за 2 подхода:

С CSS:

С одним divи псевдоэлементом и:

.arrow-left {  
  position: relative;
  width: 15%;
  padding-bottom:15%;
  border-radius: 10px;
  overflow: hidden;
  transform-origin:100% 0;
  transform: rotate(-45deg);
}
.arrow-left:after {
  content: "";
  position: absolute;
  top: 0; right:8px;
  width:100%; height:141%;
  transform-origin:inherit;
  transform: rotate(45deg);
  background:#000;
}
<div class="arrow-left"></div>

Обратите внимание, что вам необходимо добавить префиксы поставщиков к свойствам преобразования и преобразования-источника (дополнительная информация на canIuse< /а>)

Со встроенным SVG:

В этом примере используется один элемент path для треугольника с команда кривой Безье для закругленного угла (Q0 5 0.8 4.2 в атрибуте d):

svg{
  display:block;
  width:10%;
}
<svg viewbox="0 0 5 10">
  <path d="M5 0 V10 L0.8 5.8 Q0 5 0.8 4.2z" />
</svg>

person web-tiki    schedule 08.04.2014

arrow_upward
1
arrow_downward

Вы можете попробовать это и изменить в соответствии с вашими потребностями.

http://jsfiddle.net/K44mE/947/

#player {
  margin: 32px;
  position: relative;
  width: 400px;
  height: 250px;
  background-color: #222;
}

#inner {
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  background-color: silver;
  width: 100px;
  height: 100px;
  top: 20px;
  left: -60px;
  position: relative;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

#outer {
  position: absolute;
  top: 50px;
  left: 165px;
  width: 70px;
  height: 140px;
  overflow: hidden;
}
<div id="player">

  <div id="outer">
    <div id="inner">&nbsp;</div>
  </div>

</div>

person Vikram    schedule 08.04.2014

arrow_upward
0
arrow_downward

используйте 1_

.corner {
 position: absolute;
 border-radius: 4px;
 overflow: hidden;
 top: 0em;
 right: 0em;
 margin: 0em;
 padding: 0em;
 text-align: center;
 border-color: #E8E8E8;
 width: 4em;
 height: 4em;
 z-index: 1;
 -webkit-transition: border-color 0.1s ease;
 transition: border-color 0.1s ease;
 }

.corner:after {
 position: absolute;
 content: "";
 right: 0em;
 top: 0em;
 z-index: -1;
 width: 0em;
 height: 0em;
 background-color: transparent !important;
 border-top: 0em solid transparent;
 border-right: 4em solid transparent;
 border-bottom: 4em solid transparent;
 border-left: 0em solid transparent;
 border-right-color: inherit;
 -webkit-transition: border-color 0.1s ease;
 transition: border-color 0.1s ease;
 }
person warfish    schedule 22.04.2019

arrow_upward
-3
arrow_downward

в ваш код, чтобы добавить это

border-radius:10px
person AlexPrinceton    schedule 08.04.2014