Как нарисовать следующую форму с помощью CSS3

Question

Я хотел бы сделать следующую форму с помощью CSS3, поскольку мне нужно поместить текст внутри него.

Форма im, пытающаяся создать, выглядит как изображение ниже.

Я никогда не рисовал фигуры с использованием CSS, поэтому не уверен, как это сделать.

Update

Новая форма закачано accidentaly загрузил неправильную форму, она должна иметь линию, проходящую вдоль нижней

Answer 1

Проверьте The Shapes of CSS, это отличный источник для многих типов форм, созданных с CSS.

Я создал для вас JSFiddle с ожидаемым результатом.

.full-width-wrap { 
 
    width: 100%; 
 
    border-bottom: 1px solid red; 
 
} 
 

 
.shaped { 
 
    line-height: 1.5em; 
 
    border-bottom: 1.5em solid red; 
 
    border-right: 50px solid transparent; 
 
    height: 0; 
 
    width: 300px; 
 
}

<div class="full-width-wrap"> 
 
    <div class="shaped"> 
 
     Some text 
 
    </div> 
 
</div>

Answer 2

простой градиент может подделать форма:

с помощью класса можно легко сделать использовать практически в любом месте :)

.shaped { 
 
    background: linear-gradient(240deg, transparent 1em, #FF1B28 1em); 
 
    padding: 0 2em 0 1em; 
 
} 
 
body { 
 
    background:#333; 
 
    } 
 
a { 
 
    color:white; 
 
    text-decoration:none; 
 
    }

<h1 class="shaped"> title</h1> 
 
<h2 class="shaped"> title</h2> 
 
<h3 class="shaped"> title</h3> 
 
<p class="shaped">text</p> 
 
<nav> <a href="#" class="shaped">link</a> 
 
    <a href="#" class="shaped">link</a> 
 
    <a href="#" class="shaped">link</a> 
 
    <a href="#" class="shaped">link</a> 
 
    <a href="#" class="shaped">link</a> 
 
</nav>