Рисование пышного треугольника в css для меню

Я пытаюсь создать меню с пышными указателями треугольника. Я попытался, но не смог добиться этого.Рисование пышного треугольника в css для меню

<div> 

</div> 

div{ 
    position:relative; 
    left:20%; 
    height:250px; 
    width:150px; 
    border:1px solid #000; 
    top:10%; 
    background:#fff; 
} 
div:before, div:after{ 
    position:absolute; 
    content:''; 
    left:-20px; 
    border:10px solid transparent; 
    border-right-color:#fff; 
    top:30px; 
} 
div:after{ 
    left:-21px; 
    border-right-color:#000; 
    z-index:-1 
}

Направить fiddle

Также я прилагаю изображение выше для того, что я на самом деле ищу

Я рекомендую решение без использования SVG

источник

2016-06-14 Santhosh Kumar

Я думаю, вы могли бы спрашивать слишком много CSS здесь. Вы пытались использовать изображение вместо этого? – Graham

Я могу легко сделать с изображением @Graham. Но любые возможности с css –

, а затем использовать изображение – Graham

Это может помочь

/** 
 
* How to make 3-corner-rounded triangle in CSS (SO) 
 
* https://stackoverflow.com/q/14446677/1397351 
 
*/ 
 
.triangle { 
 
\t position: relative; 
 
\t background-color: orange; 
 
\t text-align: left; 
 
} 
 
.triangle:before, 
 
.triangle:after { 
 
\t content: ''; 
 
\t position: absolute; 
 
\t background-color: inherit; 
 
} 
 
.triangle, 
 
.triangle:before, 
 
.triangle:after { 
 
\t width: 100px; 
 
\t height: 100px; 
 
\t border-top-right-radius: 30%; 
 
} 
 

 
.triangle { 
 
\t transform: rotate(90deg) skewX(-30deg) scale(1,.866); 
 
} 
 
.triangle:before { 
 
\t transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%); 
 
} 
 
.triangle:after { 
 
\t transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%); 
 
} 
 

 

 

 
/* styles below for demonstration purposes only */ 
 
body { padding: 70px; } 
 
.triangle:hover { background: rgba(0,0,255,.5) } 
 
.triangle:hover:before { background: rgba(255,0,0,.5) } 
 
.triangle:hover:after { background: rgba(255,255,0,.5) }

<!-- content to be placed inside <body>…</body> --> 
 
<div class='triangle'></div>

источник

2016-06-14 10:38:41 gevorg

Да, я сделал это, а также сделал несколько изменений, чтобы повернуть его. Вы можете увидеть это в комментарии. – gevorg

Я не проверял обновленную версию..Но это нормально –

Пожалуйста, проверьте этот fiddle.

И еще fiddle

Я использовал коробку с transform и box-shadow на до и после. Пожалуйста, проверьте мой код, и если у вас возникла путаница в любой момент, дайте мне знать. Спасибо

CSS

div{ 
    position:relative; 
    left:20%; 
    height:250px; 
    width:150px; 
    border:1px solid #000; 
    top:10%; 
    background:#fff; 
} 
div:before, div:after{ 
    position:absolute; 
    content:''; 
    width:30px; 
    height:30px; 
    left:-12px; 
    background:#fff; 
    top:30px; 
-ms-transform: rotate(45deg); /* IE 9 */ 
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */ 
    transform: rotate(45deg); 

    border-radius:5px; 
} 
div:after{ 
    left:-13px; 
    border-right-color:#000; 
    z-index:-1; 
    border:1px solid #000; 
    top:29px; 
    box-shadow: 0px 1px 6px 0px #282828; 
}

источник

2016-06-14 10:47:59

Рисование пышного треугольника в css для меню

ответ

Смежные вопросы