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

Я знаю только закругленный бордюр. Не могу понять, как создавать такие вкладки без изображения ul li. Как видите, это не совсем треугольник: его верхняя и нижняя стороны немного закруглены. Можно ли создать что-то максимально похожее на картинку ниже с помощью css3? если да, то как?

Заранее спасибо!

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


html css html-lists css-shapes
person heron    schedule 14.09.2013    source источник

Ответы (3)


arrow_upward
8
arrow_downward

разметка:

сначала вы должны определить свой макияж следующим образом:

<menu type=list>
    <li>home</li> 
    <li>work</li>  
</menu>

затем используйте skew, rotate, box-shadow, border-radius и псевдоэлементы CSS следующим образом:

источник: http://www.w3schools.com/css3/css3_2dtransforms.asp http://www.w3schools.com/cssref/css3_pr_box-shadow.asp http://www.w3schools.com/cssref/css3_pr_border-radius.asp http://www.w3schools.com/css/css_pseudo_elements.asp

Demo1: http://jsfiddle.net/kougiland/mVu2z/5/ введите здесь описание изображения

menu{
   position:relative;
   width:320px;
   height:40px;
}

li{
    float:left;
    width:50%;
    background-color:red;
    list-style:none;
    position:relative;
    height:54px;
    text-align:center;
    line-height:50px;
    color:white;
}

li:before,li:after{
    position: absolute;
    content: "";
    height: 32px;
    width: 32px;
    border-radius: 4px;
    background-color: red;
    top: 11px;
    -webkit-transform: rotate(45deg) skew(16deg,16deg);
    -moz-transform: rotate(45deg) skew(16deg,16deg);
    transform: rotate(45deg) skew(16deg,16deg);
}
li:before{
    left:-15px;
}
li:after{
    right:-15px;
}
li:nth-child(2):before{
    box-shadow: 0px 0 0 black,-4px 4px 0 black;
}

Demo2: http://jsfiddle.net/kougiland/mVu2z/4/ введите здесь описание изображения

стиль:

menu{
   position:relative;
   width:320px;
   height:40px;
}

li{
    float:left;
    width:50%;
    background-color:red;
    list-style:none;
    position:relative;
    height:54px;
    text-align:center;
    line-height:50px;
    color:white;
}

li:before,li:after{
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    border-radius: 4px;
    background-color: red;
    top: 14px;
    -webkit-transform: rotate(45deg) skew(30deg,30deg);
    -moz-transform: rotate(45deg) skew(30deg,30deg);
    transform: rotate(45deg) skew(30deg,30deg);
}
li:before{
    left:-13px;
}
li:after{
    right:-13px;
}
li:nth-child(2):before{
    box-shadow: 0px 0 0 black,-4px 4px 0 black;
}

Demo3: http://jsfiddle.net/kougiland/mVu2z/введите здесь описание изображения

menu{
   position:relative;
   width:320px;
   height:40px;
}

li{
    float:left;
    width:50%;
    background-color:red;
    list-style:none;
    position:relative;
    height:54px;
    text-align:center;
    line-height:50px;
    color:white;
}

li:before,li:after{
    position:absolute;
    content:"";
    height:40px;
    width:40px;
    border-radius:4px;
    background-color:red;
    top: 7px;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    transform:rotate(45deg);
}
li:before{
    left:-20px;
}
li:after{
    right:-20px;
}
li:nth-child(2):before{
    box-shadow: 0px 0 0 black,-4px 4px 0 black;
}
person Gildas.Tambo    schedule 14.09.2013
comment
Используйте также -ms-transform и -o-transform - person Sumurai8; 14.09.2013
comment
Это превосходно... +1, но у нас одинаковые решения :) - person Mr. Alien; 14.09.2013
comment
Opera теперь является вебкитом, поэтому он нам больше не нужен, только если вы хотите, чтобы он работал на старой опере my.opera.com/ODIN/blog/300-million-users-and-move-to-webkit - person Gildas.Tambo; 14.09.2013
comment
Но угол слишком острый. Как изменить это, чтобы оно выглядело как пример @Mr.Alien? - person heron; 14.09.2013
comment
И посмотрите на пример на картинке: длина стрелки в вашем примере больше, чем на картинке. Как насчет этого? - person heron; 14.09.2013
comment
Я очень благодарен за ваше время и помощь. Но мне действительно нужно больше мягких краев. Края вашего решения очень острые - person heron; 14.09.2013
comment
просто увеличьте значение радиуса границы в соответствии с вашими требованиями в этом коде! - person Brijesh Gajjar; 14.09.2013

arrow_upward
2
arrow_downward

Вы можете использовать свойство CSS transform rotate вместе со свойством border-radius, здесь я повернул псевдоним :after, который расположен абсолютно по отношению к элементу-контейнеру. И чем я использую border-radius для кривой.

Демо

div {
    height: 30px;
    width: 100px;
    background: #f00;
    position: relative;
    margin: 100px;
}

div:after {
    background-color: #f00;
    content: "";
    display: block;
    height: 22px;
    width: 22px;
    transform: rotate(45deg);
    border-radius: 0 10px 0 0;
    right: -11px;
    top: 4px;
    position: absolute;
}
person Mr. Alien    schedule 14.09.2013

arrow_upward
0
arrow_downward

Конечно! Крис Койер написал классный код для этого:

http://css-tricks.com/triangle-breadcrumbs

person Ramin Firooz    schedule 14.09.2013
comment
Посмотрите на мою фотографию, это не совсем треугольник. Перечитайте мой вопрос. - person heron; 14.09.2013
comment
@BrjeshGajjar фейспалм :( - person heron; 14.09.2013