Add Border to Clipped Div

Question

I have a div which is transformed in shape. I want to add borders to transformed Div. If I add normal border property it doesn't transform as 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>

Please guide on how to add border to transformed Div.

But it is working fine at my end when I give border to `div:nth-child(1)` class — MKB, Sep 14 '16 at 11:28
add border to `div:nth-child(1)` instead of `div:nth-child(1) p`... does that work for you? — kukkuz, Sep 14 '16 at 11:28

score 1 · Accepted Answer · answered Sep 14 '16 at 11:54

Change your -webkit-clip-path value to this and then it works fine, do add vendor prefixes such as -webkit-, -moz-, -ms-, -o- to clip-path, because many browsers have partial support to this property.

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

I ended up using border-top-right-radius instead of -webkit-clip-path. It gives kind of same shape with borders. Thanks for your help :) — Swati Maheshwari, Sep 14 '16 at 12:07
@SwatiMaheshwari Okay but that might have got some curve shape at top-right. Welcome. — frnt, Sep 14 '16 at 13:02

score 0 · Answer 2 · answered Sep 14 '16 at 11:29

0

Try giving border to div:nth-child(1)

answered Sep 14 '16 at 11:29

MKB

777
1
9
27

Please check updated fiddle and snippet. -webkit-clip-path is removing border from one side – Swati Maheshwari Sep 14 '16 at 11:35

score 0 · Answer 3 · edited May 23 '17 at 12:01

0

EDIT : Look this : How to add border in my clip-path: polygon(); CSS style

Is that's you want ?

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>

edited May 23 '17 at 12:01

Community

1
1

answered Sep 14 '16 at 11:29

jean-max

1,640
1
18
33

Please check updated fiddle and snippet. -webkit-clip-path is removing border from one side – Swati Maheshwari Sep 14 '16 at 11:35
2

Look this : http://stackoverflow.com/questions/31854185/how-to-add-border-in-my-clip-path-polygon-css-style – jean-max Sep 14 '16 at 11:39
I ended up using border-top-right-radius instead of -webkit-clip-path. It gives kind of same shape with borders. – Swati Maheshwari Sep 14 '16 at 12:06

score 0 · Answer 4 · answered Sep 14 '16 at 11:29

0

Appears to work for me: http://jsfiddle.net/tp1g77ta/

Add

div {
  border: 1px solid black;
}

Use a class or an ID to apply only to that div.

answered Sep 14 '16 at 11:29

sol

22,311
6
42
59

Please check updated fiddle and snippet. -webkit-clip-path is removing border from one side – Swati Maheshwari Sep 14 '16 at 11:35

Add Border to Clipped Div

4 Answers4