css - 为裁剪的 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>

请指导如何为转换后的 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>