CSS3绘制一侧为矩形的梯形或平行四边形

我正在尝试仅使用CSS3创建以下图像：

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;
}

但我的测试并不顺利，以下是JS Fiddle的测试结果：

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;
}

---

使用“旋转”，将变换两个顶点。如何只能旋转左侧？因为我发现所有多边形例子都使用边框大小，所以我不能有一个外部边框：（

）你可能想考虑把你的类“PRGM”放在外部div（而不是select）上，后面的元素使块元素上的额外形状生效。

问题（<代码> <代码> >不显示），是因为

：after

伪元素将内容添加到元素中。输入元素没有内容，因此没有地方显示这些额外的内容（即使您像这样设置样式）

因此，您必须将样式应用于父元素，就像您的div一样

这个问题也在这个问题中得到了解决：

我在这把小提琴中自由地实现了左侧倾斜，右侧笔直：

您可以使用

容器（可以是

或

）并通过

背景
渐变绘制边界

不能从输入生成伪元素。

@
我认为这不是一个平行四边形，而是一个梯形。我认为
后的
选择器前面需要两个冒号（
：
后）谢谢你的更正，我逃学了我的几何课：）@Kennythonpson单个
：
是旧语法，但也被接受，或者img标记无法生成伪元素，规则：before/：：before/：after/：：after不能应用于这些：(