CODEWITHSUNDEEP
css
Ragen Dazs
Ragen Dazs

Reputation: 2170

CSS3 draw Trapezoid or Parallelogram with one rectangular side

I'm trying to create the follow image using only CSS3:

enter image description here

CSS

.pgram { 
    width: 150px; 
    height: 100px; 
    -webkit-transform: skew(-20deg); 
    -moz-transform: skew(-20deg); 
    -o-transform: skew(-20deg); 
    background: #fff;
    border: 1px solid #D8D8D8;    
    height: 24px;
    text-indent: 10px;
    float: left;
    margin: 20px;
}

/*
 * not displayng :(
 */
.pgram:after {
    border-bottom: 23px solid red;
    border-left: 11px solid transparent;
    content: "xxxxx";
   /* 
    display: block;
    float: left;
    */
    height: 20px;
    width: 10px;
    background: blue;
}

But I have no lucky with my tests, here are the result on JS Fiddle:

See Fiddle

Using rotate both vertices will be transformed. How can only left side be rotated? Becouse all polygom example I found uses border size, then I can't have an outside border :(

Upvotes: 0

Views: 688

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 106078

You could use the <div> container (could be a <span> or a <p> either) and draw the borders via background gradients like this.

You can not generate pseudo-element from input.

div {
  display:inline-block;
  position:relative;
  padding-left:1em;
  background:
    linear-gradient(
      135deg, transparent 0.85em, red 0.85em, red 0.95em, transparent 0.95em) top right no-repeat,
    linear-gradient(to left, red, red) 1.2em top no-repeat,
    linear-gradient(to left, red, red) bottom left no-repeat,
    linear-gradient(to bottom, red, red) top right no-repeat;
  background-size: 100% 1.2em, 100% 0.1em, 100% 0.1em, 0.1em 100%;
}
div:after {
  content:'';
  position:absolute;
  top:100%;
  right:0;
  height:0.5em;
  width:1em;
  background:
    linear-gradient(
      -24deg, transparent 0.43em, red 0.43em, red 0.55em, transparent 0.5em) top right no-repeat;
  border-left:0.15em red solid;
}
input {
  background:none;
  border:none;
}

@ See Fiddle

Upvotes: 1

GolezTrol
GolezTrol

Reputation: 116200

The problem (after not showing), is because the :after pseudo element adds content to an element. An input element doesn't have content, so there is no place for this extra content to show (even when you style it like you do).

So you'll have to apply the styling to a parent element, like the div you have.

This problem is also addressed in this question:

CSS content generation before or after 'input' elements

I took the liberty to implement the left-side-skewed,right-side-straight in this fiddle:

http://jsfiddle.net/FL8LY/4/

Upvotes: 1

Morklympious
Morklympious

Reputation: 1095

You might want to consider putting your class "prgm" on the outer div (instead of the select), The after element to make extra shapes works on block elements.

Upvotes: 0

Related Questions