it-swarm.com.ru

Как создать треугольник в CSS3, используя border-radius

Я использую свойство border-radius для получения закругленных углов. Но я не уверен, как получить закругленные углы этой формы. Я пытался дать одинаковые размеры с обеих сторон, но они просто не дают мне точную форму. Я пропустил некоторые свойства CSS3 здесь. 

enter image description here

Просто интересно, является ли свойство clip css ответом.

Обновление:

http://jsfiddle.net/YWnzc/136/

8
Mike

Демонстрация

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

#inner {
  transform: rotate(45deg);
  background-color: silver;
  width: 100px;
  height: 100px;
  top: 20px;
  left: -50px;
  position: relative;
  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"></div>
  </div>
</div>

Это должно привести к:

enter image description here

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

http://css3shapes.com/ есть несколько хороших примеров (обратите внимание на сердце внизу страницы)

Альтернативы

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

Смотрите также: Raphaël, библиотека для работы с векторной графикой в ​​Интернете

19
Tim Medora

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

Чтобы перевернуть или изменить вертикальное выравнивание вилки translateY () и rotate () 

/*triangle background large*/
.triangle-bg-lg, .triangle-bg-lg:before, .triangle-bg-lg:after { width: 25em; height: 25em; }

/*triangle background medium*/
.triangle-bg-md, .triangle-bg-md:before, .triangle-bg-md:after { width: 20em; height: 20em; }

/*triangle background small*/
.triangle-bg-sm, .triangle-bg-sm:before, .triangle-bg-sm:after { width: 15em; height: 15em; }

/*triangle background extra small*/
.triangle-bg-xs, .triangle-bg-xs:before, .triangle-bg-xs:after { width: 10em; height: 10em; }

/*triangle background extra extra small*/
.triangle-bg-xxs, .triangle-bg-xxs:before, .triangle-bg-xxs:after { width: 5em; height: 5em; }

/*common triangle style*/
.triangle-bg-lg,.triangle-bg-md, .triangle-bg-sm,.triangle-bg-xs,.triangle-bg-xxs {
    overflow: hidden;
    position: relative;
    margin:2em auto;
    border-radius: 20%;
    transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866);
} 
.triangle-bg-lg:before, .triangle-bg-lg:after,.triangle-bg-md:before, .triangle-bg-md:after, .triangle-bg-sm:before, .triangle-bg-sm:after,.triangle-bg-xxs:before, .triangle-bg-xxs:after{
    position: absolute;
    background: #ccc;
    pointer-events: auto;
    content: '';
}
.triangle-bg-xs:before, .triangle-bg-xs:after{
    background: #ccc;
    position: absolute;
    pointer-events: auto;
    content: '';
}
.triangle-bg-lg:before, .triangle-bg-md:before, .triangle-bg-sm:before, .triangle-bg-xs:before,.triangle-bg-xxs: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-bg-lg:after, .triangle-bg-md:after,.triangle-bg-sm:after,.triangle-bg-xs:after,.triangle-bg-xxs:after {
    border-radius: 20% 20% 53% 20%;
    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) 
            skewX(-30deg) scaleY(.866) translateX(24%);
}
<div class="page-container">
    <div class="triangle-bg-lg"></div>
    <div class="triangle-bg-md"></div>
    <div class="triangle-bg-sm"></div>
    <div class="triangle-bg-xs"></div>
    <div class="triangle-bg-xxs"></div>
</div>

1
Varsha Dhadge

Если я правильно понял ваш вопрос. Я думаю, что вы можете использовать что-то вроде ниже:

CSS:

#box{   border-color: transparent transparent transparent #FFFFFF;
    border-style: solid;
    border-width: 50px 0 50px 75px;
    height: 0;
    left: -40px;
    margin: 40px;
    position: absolute;
    width: 0;
}
 #outerbox{  background:red;
    height: 300px;
    position: relative;
    width: 122px;
}

HTML

<div id="outerbox"><div id="box"></div></div>

LIVE DEMO

http://jsfiddle.net/fsGQR//

1
defau1t

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

#box {
  border-top: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 100px solid transparent;
  border-left: 100px solid #990000;
  margin: 40px;
}​

Нет необходимости в пограничном радиусе, и уж точно не в SVG. Это должно работать во всех современных браузерах и IE8 + (мне все еще трудно назвать IE8 современным).

Демо: http://jsfiddle.net/RCzAt/4/

Подробнее о треугольниках CSS: http://css-tricks.com/snippets/css/css-triangle/

1
MusikAnimal

Это даже лучше

CSS

.c1 {
    width:50px;
    height:50px;
    background-color:yellow;
    -webkit-transform:rotate(45deg);
    position: relative;
    top: -65px;
    left: 25px;
    z-index:-1;
    border: 2px solid rgba(0,255,0,.6);
}
.c2 {
    width: 50px;
    height: 72px;
    background-color: yellow;
    z-index: 10000;
    border: 2px solid rgba(0,255,0,.6);
    border-right: 0;
}

HTML

<div class="c2">Hello</div>
<div class="c1"></div>

ДЕМО: http://jsfiddle.net/YWnzc/237/

0
TheRealChx101
<!DOCTYPE html>
<html>
<head>
<style>

.trio {position:absolute;}
.trio .triangle {
    position: relative;
    background-color: #DB524B;
    text-align: left;
}
.trio .triangle:before,
.trio .triangle:after {
    content: '';
    position: absolute;
    background-color: inherit;
}
.trio .triangle,
.trio .triangle:before,
.trio .triangle:after {
    width:  3em;
    height: 3em;
    border-top-right-radius: 33%;
}

.trio .triangle {
    transform: rotate(-60deg) skewX(-30deg) scale(1,.866);
}
.trio .triangle:before {
    transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.trio .triangle:after {
    transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}
.trio .exclamation{
    color: #DB524B;
    position:absolute;
    font-size:50px;
    top:8px;
    left:15px;
    z-index:2;
}

.trio .triangle.tri-in {
    background-color: #fff;
    margin-top: -2.9em;
    margin-left: 1px;
}
.trio .tri-in,
.trio .tri-in:before,
.trio .tri-in:after {
    width:  2.9em;
    height: 2.9em;
    border-top-right-radius: 33%;
}
/* styles below for demonstration purposes only */
body { padding: 30%; }
</style>
</head>
<body>
<div class="trio">
<span class="exclamation">!</span>
<div class='triangle'></div>
<div class='triangle tri-in'></div>
</div>
</body>
</html>
0
Sharan