Как сделать многоугольник div в CSS

Я могу сделать нормальный квадрат div и треугольник div в CSS. Но я не знаю, как сделать такую форму с одним div. Может кто-нибудь мне помочь ?Как сделать многоугольник div в CSS

Также я хочу, чтобы это распространилось на всю ширину его родительского объекта, но свойства border не поддерживают проценты. (Например border-left: 160px solid transparent;)

.container{ 
 
    width: 100%; 
 
    position: relative; 
 
} 
 

 
.v-div { 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 160px solid transparent; 
 
    border-right: 160px solid transparent; 
 
    border-top: 100px solid #f00; 
 
} 
 

 
.box{ 
 
    height: 80px; 
 
    width: 320px; 
 
    background: red; 
 
}

<div class="container"> 
 
    <div class="box"> 
 
    </div> 
 
    <div class="v-div"> 
 
    </div> 
 
</div>

источник

2016-12-28 mrid

Это многоугольник. Что еще нужно изменить? – aavrug

Хотя это уже упоминалось в моем вопросе выше, я в настоящее время использую два div. Я хочу сделать это с помощью одного div – mrid

@mrid. Думаю, я решил вашу проблему. – ab29007

вы можете сделать это с :after классами псевдо. Если раскомментировать :before в этом примере вы получите шестиугольник

#hexagon{ 
 
    position: relative; 
 
    height:100px; 
 
    width:50%; 
 
    color: white; 
 
    background: green; 
 
    padding-bottom: 15%; 
 
    overflow:hidden; 
 
    background-clip: content-box; 
 
} 
 
#hexagon:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top:100px; 
 
    left: 0; 
 
    background-color:green; 
 
    padding-bottom: 50%; 
 
    width: 57.7%; 
 
    transform-origin: 0 0; 
 
    transform: rotate(-30deg) skewX(30deg); 
 
}

<div id="hexagon"></div>

источник

2016-12-28 11:42:39 ab29007

@mrid Я думаю, что это то, что вы ищете. – ab29007

@mrid Я думаю, я решил вашу проблему. Если это так, вы можете принять мой ответ. – ab29007

<svg width="12cm" height="4cm" viewBox="0 0 1200 400" 
xmlns="http://www.w3.org/2000/svg" version="1.1"><polygon fill="lime" stroke="blue" stroke-width="10" points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5" /></svg>

источник

2016-12-28 11:43:00 Roy

Это хорошая практика переполнения стека, чтобы добавить объяснение, почему ваше решение должно работать. Для получения дополнительной информации см. [How To Ask] (http://stackoverflow.com/help/how-to-answer). –

использования: после выбора CSS.

.container{ 
 
    width: 100%; 
 
    position: relative; 
 
margin-top: 100px; 
 
} 
 

 
    .box { 
 
width: 100px; 
 
height: 55px; 
 
background: red; 
 
position: relative; 
 
} 
 
.box:after { 
 
content: ""; 
 
position: absolute; 
 
bottom: -25px; 
 
left: 0; 
 
width: 0; 
 
height: 0; 
 
border-left: 50px solid transparent; 
 
border-right: 50px solid transparent; 
 
border-top: 25px solid red; 
 
} 
 
\t \t \t \t

<div class="container"> 
 
    <div class="box"> 
 
    </div> 
 
</div>

источник

2016-12-28 11:43:22

спасибо @priya, он отлично работает. Хотя у меня есть один вопрос. Как я могу расширить этот div до его родительской ширины, не нарушая макет. Как я должен использовать это на отзывчивой веб-странице. – mrid

Border не поддерживает процент. –

вы можете использовать клип путь CSS свойство

#clippedDiv{ 
 
    width:200px; 
 
    height:200px; 
 
    background-color:red; 
 
    -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 35%, 50% 70%, 0 35%, 0 0); 
 
    clip-path: polygon(50% 0%, 100% 0, 100% 35%, 50% 70%, 0 35%, 0 
 
}

<div id="clippedDiv"></div>

для более форм вы можете посетить http://bennettfeely.com/clippy/

источник

2016-12-28 11:43:39

вы можете сказать мне, как сделать эту работу на firefox? поскольку firefox не поддерживает свойство clippath – mrid

Как сделать многоугольник div в CSS

ответ

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