CSS3 draw Trapezoid or Parallelogram with one rectangular side

Question

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 :(

I think the `after` selector needs two colons before it (`::after`) — Kenny Thompson, Jul 10 '14 at 19:18
Thanks for the correction, I play hooky my geometry class :) — Ragen Dazs, Jul 10 '14 at 19:19
@KennyThompson A single `:` is old syntax, but is accepted as well. — GolezTrol, Jul 10 '14 at 19:24
imput, or img tags can not generate pseudo elements, rules :before/::before/:after/::after cannot be applied to these :( — G-Cyrillus, Jul 10 '14 at 19:40

score 1 · Answer 1 · edited May 23 '17 at 12:01

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/

score 1 · Accepted Answer · edited Jul 10 '14 at 19:57

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

score 0 · Answer 3 · answered Jul 10 '14 at 19:28

0

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.

answered Jul 10 '14 at 19:28

Morklympious

1,065
8
12

CSS3 draw Trapezoid or Parallelogram with one rectangular side

3 Answers3