All geek questions in one place

CSS trapezoid

Is there any way to draw a trapezoid object with text? It doesn't matter if the corners are rounded; in fact, I would prefer them to be. I know how to make an oval / circle with a border radius , but I'm stuck on a trapezoid. Help me please!

+4
source share
3 answers

I did this with pure css using the pseudo-elements and skew css property with border-radius support: demo on dabblet.com <w> http://img135.imageshack.us/img135/9683/eedea21cb3bc438fb33c80c.png

html: <span>Trapezium</span> CSS

 span { display: block; z-index: 1; position: relative; /* custom sizes */ width: 200px; height: 50px; } span:before, span:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; bottom: 0; z-index: -1; } span:before { transform: skew(25deg); left: 25px; } span:after { transform: skew(-25deg); right: 25px; left: auto; }

UPD: demo without pseudo-elements

+4
source

Use this css code

 span {display:block; border-bottom: 100px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; }
0
source

I did it once, thought it was something like this:

http://jsbin.com/ebejip/

0
source

Source: https://habr.com/ru/post/1415954/

More articles:


All Articles