I want to know if it is a possible to add border in my clip-path:polygon(); style or any another way to add border?
like : border:5px solid red;
.poligon {
display: inline-block;
position: relative;
width: 150px;
height: 150px;
background: black;
box-sizing: border-box;
padding: 55px;
}
.poligon img {
display: inline-block;
border: 5px solid red;
width: 150px;
height: 150px;
-webkit-clip-path: polygon(92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% 50%, 94.69616% 53.47296%, 93.79385% 56.8404%, 92.32051% 60%, 79.82051% 81.65064%, 77.82089% 84.50639%, 75.35575% 86.97152%, 72.5% 88.97114%, 69.3404% 90.44449%, 65.97296% 91.34679%, 62.5% 91.65064%, 37.5% 91.65064%, 34.02704% 91.34679%, 30.6596% 90.44449%, 27.5% 88.97114%, 24.64425% 86.97152%, 22.17911% 84.50639%, 20.17949% 81.65064%, 7.67949% 60%, 6.20615% 56.8404%, 5.30384% 53.47296%, 5% 50%, 5.30384% 46.52704%, 6.20615% 43.1596%, 7.67949% 40%, 20.17949% 18.34936%, 22.17911% 15.49361%, 24.64425% 13.02848%, 27.5% 11.02886%, 30.6596% 9.55551%, 34.02704% 8.65321%, 37.5% 8.34936%, 62.5% 8.34936%, 65.97296% 8.65321%, 69.3404% 9.55551%, 72.5% 11.02886%, 75.35575% 13.02848%, 77.82089% 15.49361%, 79.82051% 18.34936%);
-moz-clip-path: polygon(92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% 50%, 94.69616% 53.47296%, 93.79385% 56.8404%, 92.32051% 60%, 79.82051% 81.65064%, 77.82089% 84.50639%, 75.35575% 86.97152%, 72.5% 88.97114%, 69.3404% 90.44449%, 65.97296% 91.34679%, 62.5% 91.65064%, 37.5% 91.65064%, 34.02704% 91.34679%, 30.6596% 90.44449%, 27.5% 88.97114%, 24.64425% 86.97152%, 22.17911% 84.50639%, 20.17949% 81.65064%, 7.67949% 60%, 6.20615% 56.8404%, 5.30384% 53.47296%, 5% 50%, 5.30384% 46.52704%, 6.20615% 43.1596%, 7.67949% 40%, 20.17949% 18.34936%, 22.17911% 15.49361%, 24.64425% 13.02848%, 27.5% 11.02886%, 30.6596% 9.55551%, 34.02704% 8.65321%, 37.5% 8.34936%, 62.5% 8.34936%, 65.97296% 8.65321%, 69.3404% 9.55551%, 72.5% 11.02886%, 75.35575% 13.02848%, 77.82089% 15.49361%, 79.82051% 18.34936%);
}<div class="poligon">
<img src="https://lorempixel.com/g/600/400/">
</div>
Can border be applied to a clipped element along the clip path?
No, adding border property to the clipped element would not apply the borders along the clipped path because the border is applied to the original rectangle (or square) container before the clip-path is applied and so, it also gets clipped out. You can see this in the below snippet:
div {
display: inline-block;
height: 200px;
width: 200px;
border: 3px solid;
background: darkseagreen;
}
div + div {
-webkit-clip-path: polygon(50% 0%, 100% 100%, 100% 0%);
clip-path: polygon(50% 0%, 100% 100%, 100% 0%);
}<div></div>
<div></div>Are there any alternate ways to create such a border effect?
We can mimic it by applying the same clip-path on a container element. The container element’s background color will look as though it is the border of the inner element because both are clipped and the container has slightly higher dimensions than the inner element.
.poligon {
display: inline-block;
position: relative;
width: 150px;
height: 150px;
background: red;
box-sizing: border-box;
-webkit-clip-path: polygon(92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% 50%, 94.69616% 53.47296%, 93.79385% 56.8404%, 92.32051% 60%, 79.82051% 81.65064%, 77.82089% 84.50639%, 75.35575% 86.97152%, 72.5% 88.97114%, 69.3404% 90.44449%, 65.97296% 91.34679%, 62.5% 91.65064%, 37.5% 91.65064%, 34.02704% 91.34679%, 30.6596% 90.44449%, 27.5% 88.97114%, 24.64425% 86.97152%, 22.17911% 84.50639%, 20.17949% 81.65064%, 7.67949% 60%, 6.20615% 56.8404%, 5.30384% 53.47296%, 5% 50%, 5.30384% 46.52704%, 6.20615% 43.1596%, 7.67949% 40%, 20.17949% 18.34936%, 22.17911% 15.49361%, 24.64425% 13.02848%, 27.5% 11.02886%, 30.6596% 9.55551%, 34.02704% 8.65321%, 37.5% 8.34936%, 62.5% 8.34936%, 65.97296% 8.65321%, 69.3404% 9.55551%, 72.5% 11.02886%, 75.35575% 13.02848%, 77.82089% 15.49361%, 79.82051% 18.34936%);
clip-path: polygon(92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% 50%, 94.69616% 53.47296%, 93.79385% 56.8404%, 92.32051% 60%, 79.82051% 81.65064%, 77.82089% 84.50639%, 75.35575% 86.97152%, 72.5% 88.97114%, 69.3404% 90.44449%, 65.97296% 91.34679%, 62.5% 91.65064%, 37.5% 91.65064%, 34.02704% 91.34679%, 30.6596% 90.44449%, 27.5% 88.97114%, 24.64425% 86.97152%, 22.17911% 84.50639%, 20.17949% 81.65064%, 7.67949% 60%, 6.20615% 56.8404%, 5.30384% 53.47296%, 5% 50%, 5.30384% 46.52704%, 6.20615% 43.1596%, 7.67949% 40%, 20.17949% 18.34936%, 22.17911% 15.49361%, 24.64425% 13.02848%, 27.5% 11.02886%, 30.6596% 9.55551%, 34.02704% 8.65321%, 37.5% 8.34936%, 62.5% 8.34936%, 65.97296% 8.65321%, 69.3404% 9.55551%, 72.5% 11.02886%, 75.35575% 13.02848%, 77.82089% 15.49361%, 79.82051% 18.34936%);
}
.poligon img {
position: absolute;
top: 2px; /* equal to border thickness */
left: 2px; /* equal to border thickness */
width: 146px; /* container height - (border thickness * 2) */
height: 146px; /* container height - (border thickness * 2) */
-webkit-clip-path: polygon(92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% 50%, 94.69616% 53.47296%, 93.79385% 56.8404%, 92.32051% 60%, 79.82051% 81.65064%, 77.82089% 84.50639%, 75.35575% 86.97152%, 72.5% 88.97114%, 69.3404% 90.44449%, 65.97296% 91.34679%, 62.5% 91.65064%, 37.5% 91.65064%, 34.02704% 91.34679%, 30.6596% 90.44449%, 27.5% 88.97114%, 24.64425% 86.97152%, 22.17911% 84.50639%, 20.17949% 81.65064%, 7.67949% 60%, 6.20615% 56.8404%, 5.30384% 53.47296%, 5% 50%, 5.30384% 46.52704%, 6.20615% 43.1596%, 7.67949% 40%, 20.17949% 18.34936%, 22.17911% 15.49361%, 24.64425% 13.02848%, 27.5% 11.02886%, 30.6596% 9.55551%, 34.02704% 8.65321%, 37.5% 8.34936%, 62.5% 8.34936%, 65.97296% 8.65321%, 69.3404% 9.55551%, 72.5% 11.02886%, 75.35575% 13.02848%, 77.82089% 15.49361%, 79.82051% 18.34936%);
clip-path: polygon(92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% 50%, 94.69616% 53.47296%, 93.79385% 56.8404%, 92.32051% 60%, 79.82051% 81.65064%, 77.82089% 84.50639%, 75.35575% 86.97152%, 72.5% 88.97114%, 69.3404% 90.44449%, 65.97296% 91.34679%, 62.5% 91.65064%, 37.5% 91.65064%, 34.02704% 91.34679%, 30.6596% 90.44449%, 27.5% 88.97114%, 24.64425% 86.97152%, 22.17911% 84.50639%, 20.17949% 81.65064%, 7.67949% 60%, 6.20615% 56.8404%, 5.30384% 53.47296%, 5% 50%, 5.30384% 46.52704%, 6.20615% 43.1596%, 7.67949% 40%, 20.17949% 18.34936%, 22.17911% 15.49361%, 24.64425% 13.02848%, 27.5% 11.02886%, 30.6596% 9.55551%, 34.02704% 8.65321%, 37.5% 8.34936%, 62.5% 8.34936%, 65.97296% 8.65321%, 69.3404% 9.55551%, 72.5% 11.02886%, 75.35575% 13.02848%, 77.82089% 15.49361%, 79.82051% 18.34936%);
}<div class="poligon">
<img src="https://picsum.photos/600/400">
</div>11
Adding a Border to a Complex Clip Path With SVG Dilation Filter
Copy-Shrink Method Only Works In Simple Cases — used in currently accepted answer
The currently accepted answer works by making a copy and shrinking it. This works for the example, but if you have a more complex shape (like text), it will not work. A better approach is to use dilation with a filter.
Shape Dilation Works on ANY Shape
A better approach is to use dilation with the feMorphology filter!!
- SVG feMorphology Filter
Key aspects:
- Create matching
<image>and<rect>shapes of equal height and width - Clip both with the desired shape path/polygon
- Use filter to dilate/enlarge the clipped
rectto make a border
The filter radius= becomes the stand in for border thickness.
The result:
.clipper{
clip-path: url(#clip_shape);
}
.dilate{
filter: url("#dilate_shape");
}<svg xmlns="http://www.w3.org/2000/svg" height="400" width="400">
<defs>
<clipPath id="clip_shape" clipPathUnits="objectBoundingBox">
<text x="0" y=".8" lengthAdjust="spacing" font-weight="700" font-style="italic" font-size="1"> M </text>
</clipPath>
<filter id="dilate_shape">
<feMorphology operator="dilate" in="SourceGraphic" radius="5" />
</filter>
</defs>
<g transform="translate(5,5)">
<g class="dilate">
<rect class="clipper" x=0 y=0 height="400px" width="400px" fill="lightgreen"></rect>
</g>
<image class="clipper" xlink:href="http://placekitten.com/400/300" height="400px" width="400px">
</g>
</svg>0
Pseudo-Element
A nice way to do this would be with a pseudo-element like a ::before
Make exactly the same shape but slightly smaller which holds the main color you want and position it correctly and you get the border you want.
The below example isn’t the correct shape but shows how to achieve this effect:
.shape {
width: 400px;
height: 40px;
background-color: black;
position: relative;
}
.shape:before {
content: '';
width: 398px;
height: 38px;
background: #00c000;
display: block;
position: absolute;
top: 1px;
left: 1px;
}
.shape, .shape:before {
-webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
}
<div class="shape"></div>2
It is possible to use Drop-Shadow
- The shape is entered only once
- Size can be automatically set according to the content
- The edge is outside the shape
- One “Border Container” may contain more shapes
.arrowBg {
filter: drop-shadow(1px 0px 0px black)
drop-shadow(-1px 0px 0px black)
drop-shadow(0px 1px 0px black)
drop-shadow(0px -1px 0px black)
drop-shadow(1px 1px 0px black)
drop-shadow(-1px -1px 0px black)
drop-shadow(-1px 1px 0px black)
drop-shadow(1px -1px 0px black);
}
.arrow {
background: #FFFF00;
margin:20px;
font-family: sans-serif;
font-size:20px;
}
.arrowLeft {
padding: 20px 20px 20px 40px;
clip-path: polygon(40px 0%, 100% 0%, 100% 100%, 40px 100%, 0 50%);
}
.arrowRight{
padding: 20px 40px 20px 20px;
clip-path: polygon(calc(100% - 40px) 0%, 0 0, 0 100%, calc(100% - 40px) 100%, 100% 50%);
}<br><br><br>
<span class="arrowBg">
<span class="arrow arrowLeft">Go left</span>
<span class="arrow arrowRight">Go go go right</span>
</span>Sorry for my English
4
Solution with pseudo element
I am write some simple code, use pseudo element – ::before, that I want to share.
I create the same shape-poligon, just bigger.
And so it seems that it has a border as you wanted (5px)
link to some nice clip-path: https://bennettfeely.com/clippy/
.poligon {
height: 160px;
width: 160px;
background-color: black;
clip-path: polygon(92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% 50%, 94.69616% 53.47296%, 93.79385% 56.8404%, 92.32051% 60%, 79.82051% 81.65064%, 77.82089% 84.50639%, 75.35575% 86.97152%, 72.5% 88.97114%, 69.3404% 90.44449%, 65.97296% 91.34679%, 62.5% 91.65064%, 37.5% 91.65064%, 34.02704% 91.34679%, 30.6596% 90.44449%, 27.5% 88.97114%, 24.64425% 86.97152%, 22.17911% 84.50639%, 20.17949% 81.65064%, 7.67949% 60%, 6.20615% 56.8404%, 5.30384% 53.47296%, 5% 50%, 5.30384% 46.52704%, 6.20615% 43.1596%, 7.67949% 40%, 20.17949% 18.34936%, 22.17911% 15.49361%, 24.64425% 13.02848%, 27.5% 11.02886%, 30.6596% 9.55551%, 34.02704% 8.65321%, 37.5% 8.34936%, 62.5% 8.34936%, 65.97296% 8.65321%, 69.3404% 9.55551%, 72.5% 11.02886%, 75.35575% 13.02848%, 77.82089% 15.49361%, 79.82051% 18.34936%);
}
.poligon::before {
content: "";
display: block;
position: relative;
top: 5px;
left: 5px;
height: 150px;
width: 150px;
background-color: red;
clip-path: inherit;<div class="poligon"></div>tnx “KevynTD” for your comment 🙂
3
Here’s my solution:
#wrapper {
width: fit-content;
margin: auto;
clip-path: polygon(0 0, 100% 0, 100% 100%, 60% 90%, 50% 100%, 40% 90%, 0 100%);
background: black;
border: 10px solid black;
/* or use padding instead of border: */
/* padding: 10px; */
}
#test {
width: 300px;
height: 150px;
margin: auto;
clip-path: polygon(0 0, 100% 0, 100% 100%, 60% 90%, 50% 100%, 40% 90%, 0 100%);
background: red;
} <div id="wrapper">
<div id=test></div>
</div>Using fit-content will size the wrapper equal to the test div. Since the box sizing of the wrapper is “content-box”, its with includes additional padding + border; adding either will give you an extra border around the clipped region. As long as your clip has the same percentage values, you create a constant difference for this extra border.
If using border instead of padding to create the extra border, it must be the same color as the wrapper’s background. A colored background is necessary, as it provides the border for the inner clipped region
2
Here’s how to do it.
<div class="screenshot"><img src="assets/img/tutorial/1.jpg"></div>
Just add duplicate the mask and add a padding to the parent.
.screenshot {
mask: url(../assets/img/bubble.svg) center center no-repeat;
background: white;
padding: 10px;
img {
mask: url(../assets/img/bubble.svg) center center no-repeat;
}
}
I have another solution to this..
This is what I’m working on:
.top-angle-left {
-webkit-clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 100%);
position: relative;
}
.top-angle-left:after {
-webkit-clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 85%);
clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 85%);
background: #e99d15;
content: '';
position: absolute;
left: 0;
top: -82%;
right: 0;
height: 100%;
display: block;
z-index: 9;
}
The idea that the :after element can ALWAYS scale with the its parent container, so now this is 100% responsive. This is only accomplished by applying the negative top to the :after element. Hope this is helpful!!
2
I have a cleaner solution than many of the css solutions here, however it breaks down if you’re using a shape that is concave or has corners with very small angles. In my example, the left side of the shape shows how it looks alright for most convex shapes and the right side shows the problems you’d run into with concave ones. Still, it’s easy and cleaner than having to change positioning and moving elements around.
:root {
--indent: 15%;
--arrow-shape: polygon(
var(--indent) 0,
0 50%,
var(--indent) 100%,
100% 100%,
calc(100% - var(--indent)) 50%,
100% 0
);
}
.parallelogram-outline {
display: inline-block;
background-color: black;
padding: 5px;
clip-path: var(--arrow-shape);
}
.parallelogram {
font-family: sans-serif;
background-color: white;
padding: 0.25rem 0.75rem 0.25rem 0.5rem;
clip-path: var(--arrow-shape);
}<div class="parallelogram-outline">
<div class="parallelogram">
Text
</div>
</div>