Question

我有一个改变形状的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

尝试为div:nth-child(1)

提供边框

Answer 2

编辑：看看：How to add border in my clip-path: polygon(); CSS style

你想要的吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

似乎适合我：http://jsfiddle.net/tp1g77ta/

添加

div {
  border: 1px solid black;
}

使用类或ID仅应用于该div。

Answer 4

将您的-webkit-clip-path值更改为此值然后工作正常，请将-webkit-, -moz-, -ms-, -o-等供应商前缀添加到剪辑路径，因为许多浏览器都对此属性提供部分支持。

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

＆＃13;

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

＆＃13;

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

＆＃13;

为Clipped Div添加边框

4 个答案: