CSS- Clip-Path border not working

Asked Feb 29 '16 at 17:03

Active Mar 01 '16 at 04:05

Viewed 1,499 times

I am trying to create a shape using CSS clip-path. jsfiddle is here.

My Code is:

CSS:

.kite {
    width: 280px;
    height: 280px;
    background: #1e90ff;
    border: 4px solid # 222; - webkit - clip - path: polygon(0 0, 52 % 0, 100 % 100 % , 0 52 % );
    clip - path: polygon(0 0, 52 % 0, 100 % 100 % , 0 52 % );
}
.kite: hover {
    opacity: 0.6;
}

/* Center the demo */
html,
body {
    height: 100 % ;
}
body {
    display: flex;
    justify - content: center;
    align - items: center;
}

HTML:

<div class="kite"></div>

This shape needs to have a border with black color, but the CSS currently does not create the border for the entire shape but only for the div.

edited Mar 01 '16 at 04:05

BoltClock

665,005
155
1,345
1,328

asked Feb 29 '16 at 17:03

Aqdas

1,063
4
15
54

2

http://stackoverflow.com/a/31854299/4334348 – silviagreen Feb 29 '16 at 17:05
http://codepen.io/imohkay/pen/MwaBBK/ – silviagreen Feb 29 '16 at 17:06
can you please tell me where i am doing wrong in case of my solution? – Aqdas Feb 29 '16 at 17:07
2

Possible duplicate of [How to add border in my clip-path: polygon(); CSS style](http://stackoverflow.com/questions/31854185/how-to-add-border-in-my-clip-path-polygon-css-style) – Kaiido Mar 01 '16 at 05:34

CSS- Clip-Path border not working

0 Answers0