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的結果：

見小提琴

使用旋轉，兩個頂點將被變換。 僅左側如何旋轉？ 因為我發現的所有polygom示例都使用邊框大小，所以我不能有外部邊框:(

Answer 1

問題（ after未示出），是因為:after偽元素添加內容給一個元素。 輸入元素沒有內容，因此沒有多余的內容可以顯示（即使您像設置樣式一樣）。

因此，您必須將樣式應用於父元素，例如您擁有的div。

此問題也得到解決：

在“輸入”元素之前或之后的CSS內容生成

我毫不猶豫地在這個小提琴中實現了左偏斜，右直偏：

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

Answer 2

你可以使用<div>容器（可以是<span>或<p>任一），並通過繪制邊界background梯度這樣 。

您不能從輸入生成偽元素。

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

@ 見小提琴

Answer 3

您可能需要考慮將類“ prgm”放在外部div上（而不是select上），使多余形狀的after元素可用於block元素。