Issue
I create this div <div class="arrow"></div>
and then drown arrow with clip path using the below CSS code
.arrow {
width: 40px;
height: 121px;
background: #fff;
-webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
position: absolute;
right: -41px;
z-index: 1;
top: -1px;
}
but now I face a problem , I didn't need this clip path to fill with background color I just want it to have a border I try to give it border:1px solid #000
but it doesn't work
Solution
Looking at the codepen example you gave, they have two clip-paths on two divs. This gives the impression of having a border. Modifying it with your path gives you this:
.arrowLine {
position: absolute;
width: 40px;
height: 151px;
background: rebeccapurple;
top:-1px;
right:-41px;
z-index:1;
-webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}
.arrow {
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
background: white;
-webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}
<div class="arrowLine">
<div class="arrow"></div>
</div>
The top/left/right/bottom is where the width of the 'border' is. (You could also use inset:5px instead of writing all of them)
Here's a codepen: https://codepen.io/darlo/pen/RwMpyeV
Answered By - Darlo
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.