I'm wondering if this kind of tabs could be made fully in CSS or am I going to need images?
Regards!
You can by using:
-webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
They are called 'Chevron'.
Related
I am working on a project where I need to use a Polygon shaped container. I managed to make it work on chrome with -webkit-clip-path. I know that i have to use a other class name to make it work on Firefox. I tried moz-clip-pathbut that didn't seem to work. I will leave a code sample so that you can try it out yourself.
I am thankful for any suggestions
display: block;
margin: 0 auto;
position: relative;
width: 352px;
height: 304px; /* width * 0.866 */
background: #333333;
box-sizing: border-box;
-webkit-clip-path: polygon(
0% 50%,
25% 0%,
75% 0%,
100% 50%,
75% 100%,
25% 100%
);
-moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}
I am running into an issue with css linear-gradients. I am looking to make clean color breaks at certain percentages. But it seems to start blurring the colors when I add more than a certain number:
This is the example of the css gradient with "too many" color breaks - and blurs where it should not:
div {
height: 100px;
background-color: red;
background-image: linear-gradient(to right, #ffffff 25%, #042750 25% 28%, #ffffff 28% 29%, #03aeef 29% 31%, #ffffff 31% 32%, #042750 32% 90%, #ffffff 90% 91%, #03aeef 91% 93%, #ffffff 93% 94%, #ffd900 94% 96%, #ffffff 96% 97%, #042750 97% 100%);
}
<div></div>
This is an example of it with it enough color breaks so it doesn't blur:
div {
height: 100px;
background-color: red;
background-image: linear-gradient(to right, #ffffff 25%, #042750 25% 28%, #ffffff 28% 29%, #03aeef 29% 31%, #ffffff 31% 32%, #042750 32% 90%, #ffffff 90% 91%, #03aeef 91% 100%)
}
<div></div>
In such case it's better to use multiple gradient:
div {
height: 100px;
background:
/* Color position /width height */
linear-gradient(#03aeef,#03aeef) 50% 0 / 5% 100%, /* top layer */
linear-gradient(#fff,#fff) 50% 0 / 10% 100%,
linear-gradient(#03aeef,#03aeef) 87% 0 / 5% 100%,
linear-gradient(#ffd900 ,#ffd900) 94% 0 / 5% 100%,
linear-gradient(#fff,#fff) 95% 0 / 15% 100%,
linear-gradient(#042750,#042750) right / 60% 100%; /* bottom layer */
background-repeat:no-repeat;
}
<div></div>
These are the Divs
I tried to use :
`clip-path:polygon()`
But the shapes have more than 12 Edges, I promise that I've been trying to figure it out for a long period of time and I'm Stuck ..
You can use SVG
https://www.w3schools.com/graphics/svg_polygon.asp
I would recommend using SVG's. They are sharp and also endless scale able because they are vector based.
You can use create polygon using this link: http://bennettfeely.com/clippy/
Create simple triangle and try to understand the % values following the colour dots and percentage and then you can change % values later on to create any polygon.
div {
width: 280px;
height: 280px;
background: #1e90ff;
-webkit-clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
}
/* Center the demo */
html, body { height: 100%; }
body {
display: flex;
justify-content: center;
align-items: center;
}
<div></div>
How can I clip image with an outline?
I am using the guide from here.
css:
clip-polygon {
clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
border: 10px solid red;
}
HTML:
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" alt="" class="clip-polygon">
Result:
It the border/ outline does not follow the clipped shape at all.
Is it achievable?
Also, how can I clip with more curved like pebbles, something like:
Is there a css3 method that would allow you to diagonally corner crop an image?
I have a white/grey box variant in the works -- for solid colors -
.item:before{
content: '';
position: absolute;
top: 0;
right: 0;
border-top: 40px solid #dddddd;
border-left: 40px solid #ffffff;
width: 0;
}
.item:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
border-top: 40px solid #ffffff;
border-left: 40px solid #dddddd;
width: 0;
}
one of the big issues now though
is the polygon is using %'s -- so if the divs are different sizes -- the corners look different
This isn't quite the right dimensions, and you'll have to adjust based on your image height/width, but here's a little example that could work:
.clipit {
max-width:100%;
height:auto;
-webkit-clip-path: polygon(0% 0%, calc(100% - 30px) 0%, 100% calc(0% + 30px), 100% 100%, calc(0% + 30px) 100%, 0% calc(100% - 30px));
clip-path: polygon(0% 0%, calc(100% - 30px) 0%, 100% calc(0% + 30px), 100% 100%, calc(0% + 30px) 100%, 0% calc(100% - 30px));
}
<img class="clipit" src="http://images.freeimages.com/images/previews/865/stairs-of-light-1532779.jpg" />
This page could be really useful to you: http://bennettfeely.com/clippy/
Basically: clip-path: polygon(0% 0%, calc(100% - 30px) 0%, 100% calc(0% + 30px), 100% 100%, calc(0% + 30px) 100%, 0% calc(100% - 30px));:
Point 1 at 0% (width), 0% (height)
Point 2 at 100% - 30px (width), 0% (height)
Point 3 at 100% (width), 0% + 30px (height)
etc.
Take a look at this site http://bennettfeely.com/clippy/
You can design your own clip path angles. (Designer does not appear to work in Firefox)
-webkit-clip-path: polygon(0 10%, 10% 0, 100% 0%, 100% 90%, 90% 100%, 0% 100%);
clip-path: polygon(0 10%, 10% 0, 100% 0%, 100% 90%, 90% 100%, 0% 100%);
The 10% is the top left corner, the 90% is the bottom right.
example image
I think I figured it out. you would have to use clip-path:
.item{
-webkit-clip-path: polygon(75% 0, 100% 25%, 100% 100%, 25% 100%, 0 75%, 0 0);
clip-path: polygon(75% 0, 100% 25%, 100% 100%, 25% 100%, 0 75%, 0 0);
}
here's an example with a image and div with a background:
http://codepen.io/nilestanner/pen/vXOZmG
You cant create your own polygons here: http://bennettfeely.com/clippy/