0
Как нарисовать изображение ниже в css.Trapezium outline in css
Получил много ссылок, чтобы нарисовать заполненную форму, но dint найти любую ссылку, где можно нарисовать контур.
A
ответ
1
Использование псевдо элемент вы должны получить желаемый эффект.
Это не самое лучшее, но это хорошая отправная точка, чтобы доставить вас на ваш путь.
div {
margin-left: 20px;
border-top: 2px solid darkred;
border-right: 2px solid darkred;
height: 30px;
display: inline-block;
background: white;
width: auto;
padding: 0 10px 0 0;
line-height: 30px;
position: relative;
}
div:before {
position: absolute;
top: 5px;
left: -11px;
content: '';
width: 35px;
height: 35px;
transform: rotate(30deg);
background: transparent;
border-left: 2px solid darkred;
}<div>Some text</div>Альтернативой будет использовать SVG, который является супер просто и использует координаты, чтобы сделать желаемую форму.
<svg width="100px" height="30px" viewbox="0 0 100 30" preserveAspectRatio="none">
<path d="M5,25 L20,5 L95,5 L95,25" stroke="darkred" stroke-width="5" fill="white" />
</svg>
же, как заполнены только с цветом границы? – PeeHaa
Связанный - http://stackoverflow.com/questions/19248443/is-it-possible-to-create-an-angled-corner-in-css/30729446#30729446 (тот же подход, используемый для '.shape: before' без «border-radius» будет работать для этого). – Harry
Либо подход, используемый в ответе, связанный с приведенным выше комментарием (или), тот, который используется в первом дублированном потоке (в уведомлении сверху), будет работать. Вам просто нужно установить границу только на требуемых сторонах. – Harry