CODEWITHSUNDEEP
cssshapescss-shapes
Aris
Aris

Reputation: 191

css3 - How to make this shape?

I am trying to use css3 to create this shape:

simple shape

(I know the image quality is terrible but you get the point). I 've tried some of these css shape generators: http://medleyweb.com/resources/css-generator-ui-animation/ with no success. Any ideas?

Upvotes: 0

Views: 175

Answers (2)

recursive
recursive

Reputation: 86084

Here's one way: http://codepen.io/anon/pen/HKbrq

HTML:

<div class="trapezoid">  </div>

CSS:

.trapezoid {
  width: 400px;
  height: 150px;
  border-style: solid;
  border-width: 40px;
  border-color: transparent;
  border-left-color: black;
  border-left-width: 300px;
}

Upvotes: 1

Jonysuise
Jonysuise

Reputation: 1830

Have you tried with SVG ? you can draw polygons. SVG is XML-based. Or use the matrix() transform.

Upvotes: 0

Related Questions