Ответ 1

Моя лучшая попытка: http://dabblet.com/gist/4592062

Совершенство пикселя любого размера, использует более простую математику, чем оригинальное решение Ana, и, на мой взгляд, более интуитивно понятно:)

 .triangle {
позиция: относительная;
background-color: orange;
text-align: left;
}
.triangle: перед тем,
.triangle: после {
content: '';
позиция: абсолютная;
background-color: inherit;
}
.треугольник,
.triangle: перед тем,
.triangle: после {
ширина: 10 мкм;
высота: 10м;
border-top-right-radius: 30%;
}

.triangle {
transform: вращать (-60deg) масштаб skewX (-30deg) (1,.866);
}
.triangle: before {
transform: rotate (-135deg) skewX (-45deg) шкала (1.414,.707) translate (0, -50%);
}
.triangle: после {
transform: rotate (135deg) skewY (-45deg) шкала (.707,1.414) translate (50%);
}Код>

  < div class= "треугольник" > </div>

Ответ 2

демо-версия

.triangle, .triangle:before, .triangle:after { width: 4em; height: 4em; }
.triangle {
	overflow: hidden;
	position: relative;
	margin: 7em auto 0;
	border-radius: 20%;
	transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866);
	cursor: pointer;
	pointer-events: none;
} 
.triangle:before, .triangle:after {
	position: absolute;
	background: orange;
	pointer-events: auto;
	content: '';
}
.triangle:before {
	border-radius: 20% 20% 20% 53%;
	transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) 
			skewX(30deg) scaleY(.866) translateX(-24%);
}
.triangle:after {
	border-radius: 20% 20% 53% 20%;
	transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) 
			skewX(-30deg) scaleY(.866) translateX(24%);
}

/** extra styles to show how it works **/

.triangle:hover { overflow: visible; }
.triangle:hover:before, .triangle:hover:after { background: none; }
.triangle:hover, .triangle:hover:before, .triangle:hover:after {
	border: dashed 1px;
}

<div class='triangle'></div>

Ответ 3

Используйте изображение какого-то рода. Вот для чего нужны изображения. Если вам нужно масштабировать, SVG - хороший выбор, в противном случае просто используйте png в качестве фона или элемент <img> если он является частью контента.

Если вам абсолютно необходимо иметь его в файле CSS, вы можете попробовать data: urls (не поддерживается в IE7 и ниже).

Ответ 4

Ана-ответ вдохновил меня попробовать другой подход, такой же далеко не идеальный, но, по крайней мере, симметричный. Здесь превью в реальном размере и взорван. Это просто пограничный хак, завернутый в обтравочный круг /border-radius:

И код (отрегулируйте общий размер через одно свойство font-size):

.triangle {
    font-size: .8em;
    position: relative;
    width: 3.8em;
    height: 3.8em;
    text-align: center;
    margin: 10% auto 0;
    overflow: hidden;
    border-radius: 100%;
} 
.triangle:before {
    content: '';
    position: absolute;
    width:0;
    height: 0;
    border: solid 2em transparent;
    border-bottom-color: orange;
    border-bottom-width: 3.2em;
    border-top-width: 0;
    margin: -.3em -2em;
}

Поиграйте с этим здесь: http://dabblet.com/gist/4590714

Ответ 5

Поиграл с наиболее одобренной версией Мюррея Смита. Написал его как миксин Stylus, исправил некоторые проблемы с полями и добавил опцию направления. Миксин также масштабирует треangularьник до идеального размера в пикселях. Не проверено очень хорошо. Используйте с осторожностью

http://codepen.io/perlundgren/pen/VYGdwX

    triangle(direction = up, color = #333, size = 32px)
        position: relative
        background-color: color
        width:  2*(round(size/3.25))
        height: 2*(round(size/3.25))
        border-top-right-radius: 30%
        &:before,
        &:after
          content: ''
          position: absolute
          background-color: inherit
          width:  2*(round(size/3.25))
          height: 2*(round(size/3.25))
          border-top-right-radius: 30%

        if direction is up
          transform: rotate(-60deg) skewX(-30deg) scale(1,.866)
          margin: (@width/4) (@width/2.5) (@width/1.2) (@width/2.5)

        if direction is down
          transform: rotate(-120deg) skewX(-30deg) scale(1,.866)
          margin: 0 (@width/1.5) (@width/1.5) (@width/6)

        if direction is left
          transform: rotate(-30deg) skewX(-30deg) scale(1,.866)
          margin: (@width/5) 0 (@width) (@width/1.4)

        if direction is right
          transform: rotate(-90deg) skewX(-30deg) scale(1,.866)
          margin: (@width/5) (@width/1.4) (@width) 0

        &:before
          transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%)
        &:after
          transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%)

а затем просто добавьте миксин в свой класс

    .triangle
      &.up
        triangle()
      &.down
        triangle(down)
      &.left
        triangle(left)
      &.right
        triangle(right)

Ответ 6

Я увидел, что кто-то спрашивал о равнобедренном треугольнике, и, пытаясь изменить принятый ответ, я нашел, как манипулировать им, чтобы получить то, что я хотел, учитывая, что мне нужно то же самое. Это должно помочь любому, кто ищет небольшое изменение в закругленном угловом треугольнике.

Вы заметите, что я выделил ширину, высоту и border-top-right-radius, а затем приступил к изменению border-top-right-radius для придания формы углам. Единственное, что я изменил, было свойство transform элемента напрямую. Вы можете изменить его так, как считаете нужным, но это, кажется, единственные необходимые изменения.

.diff-arrow {
  margin-left:30px;
  position: relative;
  background-color: #20C0F1;
  text-align: left;
  width: 10em;
  height: 10em;
  border-top-right-radius: 20%;
}

.diff-arrow:before,
.diff-arrow:after {
  content: '';
  position: absolute;
  background-color: inherit;
  width: 10em;
  height: 10em;
  border-top-right-radius: 15%;
}

.diff-arrow {
  transform: rotate(-45deg) skewX(0deg) scale(0.5);
}

.diff-arrow:before {
  transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%);
}

.diff-arrow:after {
  transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
}

<div class="diff-arrow"></div>