CSS3绘制梯形或平行四边形，一个矩形边

Question

我尝试仅使用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的结果：

See Fiddle

使用旋转两个顶点都将被转换。怎么只能左转？我发现使用边框大小的所有多边形示例，然后我不能有外边框:(

Answer 1

问题（after未显示）是因为:after伪元素将内容添加到元素中。输入元素没有内容，因此没有地方可以显示此额外内容（即使您像对待样式一样）。

因此，您必须将样式应用于父元素，例如您拥有的div。

此问题也解决了这个问题：

CSS content generation before or after 'input' elements

我冒昧地在这个小提琴中实现了左侧倾斜的右侧直线：

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

Answer 2

您可以使用<div>容器（也可以是<span>或<p>）并通过background渐变 like this绘制边框

您无法从输入生成伪元素。

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

Answer 3

您可能需要考虑将您的类“prgm”放在外部div（而不是select）上，After元素可以在块元素上使用额外的形状。