所以我試圖在CSS中進行偏斜分離(僅)。它應該看起來有點像這裏:http://i.stack.imgur.com/hVCa1.pngcss中的偏斜分離
我試過用CSS轉換已經(transform: skew(-15deg);
),但我不認爲它適用於所有瀏覽器,它不是真的適應。我想過用線性漸變來做,但我不確定這是否更好。
你們知道有更好的解決方案嗎?
編輯:下面的代碼:
.results {
width: 500px; }
.transf {
height: 30px;
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
display: inline-block;
-moz-transform: skew(-15deg);
-webkit-transform: skew(-15deg);
-o-transform: skew(-15deg);
-ms-transform: skew(-15deg);
transform: skew(-15deg);
background: grey !important;
width: 6px;
margin-left: -4px;
margin-right: -5px;
z-index: 1; }
.left_border {
height: 30px;
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
display: inline-block;
-moz-transform: skew(-15deg);
-webkit-transform: skew(-15deg);
-o-transform: skew(-15deg);
-ms-transform: skew(-15deg);
transform: skew(-15deg);
background: yellow;
border-right: 1px solid green;
border-top: 1px solid green;
border-bottom: 1px solid green;
width: 10px;
margin-left: -15px;
z-index: 2; }
.right_border {
height: 30px;
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
display: inline-block;
-moz-transform: skew(-15deg);
-webkit-transform: skew(-15deg);
-o-transform: skew(-15deg);
-ms-transform: skew(-15deg);
transform: skew(-15deg);
background: orange;
border-left: 1px solid red;
border-top: 1px solid red;
border-bottom: 1px solid red;
width: 10px;
margin-right: -20px;
z-index: 2; }
.left {
height: 30px;
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
display: inline-block;
background: yellow;
width: 30%;
border: 1px solid green;
z-index: 0; }
.right {
height: 30px;
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
display: inline-block;
background: orange;
width: 20%;
border: 1px solid red;
z-index: 0; }
.item21 {
width: 5%; }
.item22 {
width: 15%; }
和HTML:
<div class="results">
<div class="left"></div>
<div class="left_border"></div>
<div class="transf"></div>
<div class="right_border"></div>
<div class="right"></div>
</div>
<div class="results">
<div class="left item21"></div>
<div class="left_border"></div>
<div class="transf"></div>
<div class="right_border"></div>
<div class="right item22"></div>
</div>
郵政編碼請。 – thatidiotguy