How to add border in my clip-path: polygon(); CSS style
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>
CSS - How to add a border color to a css shape
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.
.shape { width: 400px; height: 40px; background-color: black; -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%); position: relative;}
.shape:before { content: ''; width: 398px; height: 38px; -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%); background: green; display: block; position: absolute; top: 1px; left: 1px;}
<div class="shape"></div>
How to get a border around this polygon?
The border
property goes around the outside of an element, and the clip-path
property applies a mask to an element. So, as far as other CSS rules are concerned, you're still dealing with a rectangle. Because of this, you can't simply apply a border.
It's not impossible to get very close to the effect you want, however. Using (and abusing) CSS pseudo-elements, borders, and filters you can create the same shape plus an outline with only a single HTML div.
div { position: relative; width: 210px; height: 280px; background: #1e90ff; border-bottom-left-radius: 15px; border-top-left-radius: 15px; filter: drop-shadow( 0px 3px 0 black) drop-shadow( 0px -3px 0 black) drop-shadow( 3px 0px 0 black) drop-shadow(-3px 0px 0 black); -webkit-filter: drop-shadow( 0px 3px 0 black) drop-shadow( 0px -3px 0 black) drop-shadow( 3px 0px 0 black) drop-shadow(-3px 0px 0 black);}div::after { position: absolute; display: block; content: ''; width: 0; height: 0; left: 210px; top: 0; border-left: 70px solid #1e90ff; border-right: 70px solid transparent; border-top: 140px solid transparent; border-bottom: 140px solid transparent;}
<div></div>
How to use clip-path property for border in css
add some gradient to fill the missing spaces:
.test {
background: red;
width: 100px;
height: 100px;
box-sizing:border-box;
/* CORNERS */
clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
}
.test:hover {
--grad:transparent 49.5%,green 50%;
background:
linear-gradient(to top right ,var(--grad)) top right,
linear-gradient(to top left ,var(--grad)) top left,
linear-gradient(to bottom right,var(--grad)) bottom right,
linear-gradient(to bottom left ,var(--grad)) bottom left,
white;
background-size:13px 13px; /* 10px of the clip-path + 3px of border */
background-repeat:no-repeat;
background-origin:border-box;
cursor: pointer;
border: 3px solid green;
}
<div class='test'>
</div>
CSS - Add border color on clip path polygon
You can fake it with several drop shadow filters. There isn't much support, but cli path doesn't have much either ...
.image-center { width: 300px; height: 300px; margin: 0 auto; -webkit-filter: drop-shadow(2px 2px 0px red) drop-shadow(2px -2px 0px red) drop-shadow(-2px 2px 0px red) drop-shadow(-2px -2px 0px red); filter: drop-shadow(2px 2px 0px red) drop-shadow(2px -2px 0px red) drop-shadow(-2px 2px 0px red) drop-shadow(-2px -2px 0px red);}.shape { width: 300px; height: 300px; -webkit-clip-path: polygon(15% 0, 70% 0, 100% 50%, 70% 100%, 15% 100%, 0 70%, 20% 50%, 0% 30%); clip-path: polygon(15% 0, 70% 0, 100% 50%, 70% 100%, 15% 100%, 0 70%, 20% 50%, 0% 30%);}img { width: 300px; height: 300px;}
<div class="image-center"> <div class="shape"> <img src="http://www.businessadvisorsmd.com/wp-content/uploads/2016/01/masteraccounting-1.jpg" /> </div></div>
css - clip image and add border to fit in div
Adjust the different values and you can do it with border-radius:
.my-clip {
position: absolute;
left: 50%;
top: -6%;
transform: translate(-50%);
/*clip-path: circle(80px at 50% 25%); no more needed*/
background-color: #bdbdbd;
}
.square {
position: relative;
width: 160px;
height: 160px;
overflow: hidden;
border: 1px solid red;
border-radius: 50%;
}
<div class="square">
<img class="my-clip" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/300px-Tux.svg.png" alt="alternatetext">
</div>
Polygon border of a button with transparent background
Your idea is good but you will need to fix the math which is the complex part here.
You will notice that this will also affect the content so I add it as pseudo element to avoid this:
.p-button {
position:relative;
padding: 14px 50px;
font-size:45px;
text-decoration:none;
}
.p-button:before{
content:"";
position:absolute;
inset:0;
background:black;
--b: 4px; /* border width */
--h:34px; /* this is half the height, adjust it based on your code */
--b1: calc(0.866*var(--b));
--b2: calc(0.5*var(--b));
clip-path:polygon(
0 50%,
calc(0.134*var(--h)) 25%, /* 0.134 = 1 - cos(30) */
calc( 0.5*var(--h)) 6.7%, /* 6.7% = 0.134/2 * 100% */
var(--h) 0,
calc(100% - var(--h)) 0,
calc(100% - 0.5*var(--h)) 6.7%,
calc(100% - 0.134*var(--h)) 25%,
100% 50%,
calc(100% - 0.134*var(--h)) 75%,
calc(100% - 0.5*var(--h)) 93.3%, /* 93.3% = 100% - 6.7% */
calc(100% - var(--h)) 100%,
var(--h) 100%,
calc( 0.5*var(--h)) 93.3%,
calc(0.134*var(--h)) 75%,
0 50%,
var(--b) 50%,
calc(0.134*var(--h) + var(--b1)) calc(75% - var(--b2)),
calc( 0.5*var(--h) + var(--b2)) calc(93.3% - var(--b1)),
var(--h) calc(100% - var(--b)),
calc(100% - var(--h)) calc(100% - var(--b)),
calc(100% - 0.5*var(--h) - var(--b2)) calc(93.3% - var(--b1)),
calc(100% - 0.134*var(--h) - var(--b1)) calc(75% - var(--b2)),
calc(100% - var(--b)) 50%,
calc(100% - 0.134*var(--h) - var(--b1)) calc(25% + var(--b2)),
calc(100% - 0.5*var(--h) - var(--b2)) calc(6.7% + var(--b1)),
calc(100% - var(--h)) var(--b),
var(--h) var(--b),
calc( 0.5*var(--h) + var(--b2)) calc(6.7% + var(--b1)),
calc(0.134*var(--h) + var(--b1)) calc(25% + var(--b2)),
var(--b) 50%) ;
}
body{
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
background:linear-gradient(45deg,red,lightblue);
}
<a class="p-button" href="">Demo it</a>
Add Border to Clipped Div
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>
Related Topics
Border-Radius in Percentage (%) and Pixels (Px) or Em
When to Use Margin VS Padding in Css
Css Scrollbar Style Cross Browser
Difference Between Style = "Position:Absolute" and Style = "Position:Relative"
How to Show Only Corner Borders
Semi-Transparent Color Layer Over Background-Image
Add Bootstrap Glyphicon to Input Box
Css3 Transition Animation on Load
Change Bootstrap Navbar Collapse Breakpoint Without Using Less
Css Reset - What Exactly Does It Do
Css 100% Height With Padding/Margin
Css :After Not Adding Content to Certain Elements
How to Get Ff 33.X Flexbox Behavior in Ff 34.X
Formatting Numbers (Decimal Places, Thousands Separators, Localization, etc) With CSS
Reduce Spacing Between Bootstrap Horizontal Form Controls
How to Combine Class and Id in CSS Selector
Why Aren't My Grid-Template-Areas With Ascii Art Not Working