Я бы хотел создать такую же форму, как и без Javascript:
В настоящее время я накладываю изображение "рамки" на оранжевый прямоугольный div, но это довольно хаки. Я полагаю, я мог бы использовать динамически созданный элемент canvas, но для этого требуется не только JS, но и поддержка холста HTML5. Любые идеи?
Моя лучшая попытка: 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>
.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> Используйте изображение какого-то рода. Вот для чего нужны изображения. Если вам нужно масштабировать, SVG - хороший выбор, в противном случае просто используйте png в качестве фона или элемент <img> если он является частью контента.
Если вам абсолютно необходимо иметь его в файле CSS, вы можете попробовать data: urls (не поддерживается в IE7 и ниже).
Ана-ответ вдохновил меня попробовать другой подход, такой же далеко не идеальный, но, по крайней мере, симметричный. Здесь превью в реальном размере и взорван. Это просто пограничный хак, завернутый в обтравочный круг /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
Поиграл с наиболее одобренной версией Мюррея Смита. Написал его как миксин 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)
Я увидел, что кто-то спрашивал о равнобедренном треугольнике, и, пытаясь изменить принятый ответ, я нашел, как манипулировать им, чтобы получить то, что я хотел, учитывая, что мне нужно то же самое. Это должно помочь любому, кто ищет небольшое изменение в закругленном угловом треугольнике.
Вы заметите, что я выделил ширину, высоту и 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>