切り抜いたDivに枠を追加する

Question

jsfiddle

私は形状が変形しているdivを持っています。私は変形されたDivに罫線を追加したい。 通常の境界線プロパティを追加すると、divとして変換されません。

body { 
 
    margin:50px; 
 
    min-width:400px; 
 
    background:white; 
 
} 
 
div:nth-child(1) { 
 
    background:rgb(122, 206, 122); 
 
    height:140px; 
 
    transform: skew(-10deg) rotate(2deg); 
 
    -webkit-transform: skew(-10deg) rotate(2deg); 
 
    -moz-transform: skew(-10deg) rotate(2deg); 
 
    border: 2px solid red; 
 
    -webkit-clip-path:polygon(0 0, 0 100%, 100% 100%, 100% 150%, 82% 0); 
 
} 
 
div:nth-child(1) p { 
 
    transform: skew(10deg) rotate(-2deg); 
 
    -webkit-transform: skew(10deg) rotate(-2deg); 
 
    -moz-transform: skew(10deg) rotate(-2deg); 
 
    padding:3% 2%; 
 
    border 
 
}

<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper mattis risus cursus lobortis. Etiam in erat erat. Morbi venenatis quam ense pharetra sit amet lacus eget semper. Sed condimentum suscipit faucibus.</p></div>

変換本部に境界線を追加する方法について案内してください。

Answer 1

-webkit-clip-pathの値をこれに変更してから正常に機能するので、多くのブラウザでこのプロパティの一部がサポートされているため、-webkit-, -moz-, -ms-, -o-などのベンダープレフィックスをclip-pathに追加してください。

-webkit-clip-path:polygon(0 0, 0 100%, 100% 100%, 100% 0%, 82% 0); 

body { 
 
    margin:50px; 
 
    background:white; 
 
} 
 
div{ 
 
    min-width:400px; 
 
    height:auto; 
 
    background:rgb(122, 206, 122); 
 
    transform: skew(-10deg) rotate(2deg); 
 
    -webkit-transform: skew(-10deg) rotate(2deg); 
 
    -moz-transform: skew(-10deg) rotate(2deg); 
 
    border: 2px solid red; 
 
    -webkit-clip-path:polygon(0 0, 0 100%, 100% 100%, 100% 0%, 82% 0); 
 
    padding:10px; 
 
} 
 
div > p { 
 
    transform: skew(10deg) rotate(-2deg); 
 
    -webkit-transform: skew(10deg) rotate(-2deg); 
 
    -moz-transform: skew(10deg) rotate(-2deg); 
 
    padding:3% 2%; 
 
    width:100%; 
 
    height:auto; 
 
}

<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper mattis risus cursus lobortis. Etiam in erat erat. Morbi venenatis quam enim, elementum bibendum elit sollicitudin mollis. Integer rutrum orci sed cursus consectetur. Aliquam vitae consequat augue. Suspendisse pharetra sit amet lacus eget semper. Sed condimentum suscipit faucibus.</p></div>

Answer 2

div:nth-child(1)

Answer 3

EDITに境界線を与えてみてください。これを見て：How to add border in my clip-path: polygon(); CSS style

は、それはあなたがしたいですか？

body { 
 
    margin:50px; 
 
    min-width:400px; 
 
    background:white; 
 
} 
 
div:nth-child(1) { 
 
    background:rgb(122, 206, 122); 
 
    height:140px; 
 
    transform: skew(-10deg) rotate(2deg); 
 
    -webkit-transform: skew(-10deg) rotate(2deg); 
 
    -moz-transform: skew(-10deg) rotate(2deg); 
 
    border: solid 1px black; 
 
} 
 
div:nth-child(1) p { 
 
    transform: skew(10deg) rotate(-2deg); 
 
    -webkit-transform: skew(10deg) rotate(-2deg); 
 
    -moz-transform: skew(10deg) rotate(-2deg); 
 
    padding:3% 2%; 
 
}

<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper mattis risus cursus lobortis. Etiam in erat erat. Morbi venenatis quam ense pharetra sit amet lacus eget semper. Sed condimentum suscipit faucibus.</p></div>

Answer 4

私のために働くように見える：http://jsfiddle.net/tp1g77ta/

だけそのdiv要素に適用するクラスやIDを使用し

div { 
    border: 1px solid black; 
} 

を追加します。