Looking for the code to make this particular shape with CSS..
Any help much appreciated!
You can do it with some rotation and perspective:
.box {
width: 150px;
height: 120px;
background: #f540a8;
margin: 20px;
transform: perspective(180px) rotateX(15deg) rotateY(20deg) rotateZ(-3deg);
}
<div class="box">
</div>
Or using SVG:
<svg viewBox="0 0 200 200" width=200>
<polygon points="20,0 150,20 170,130 0,150" fill="#f540a8" />
</svg>
And also using gradient (but without transparency):
.box {
width: 150px;
height: 120px;
background:
linear-gradient(to top right, transparent 46%,#fff 50%) right/10px 100%,
linear-gradient(to top right, transparent 46%,#fff 50%) top/100% 10px,
linear-gradient(to bottom right, transparent 46%,#fff 50%) bottom/100% 10px,
linear-gradient(to top left, transparent 46%,#fff 50%) left/10px 100%,
#f540a8;
background-repeat:no-repeat;
margin: 20px;
}
<div class="box">
</div>
You can use clip-path.
The clip-path CSS property creates a clipping region that defines
what part of an element should be displayed. More specifically, those
portions that are inside the region are shown, while those outside are
hidden.
Try this code snippet.
div{
width: 150px;
height: 150px;
-webkit-clip-path: polygon(5% 7%, 91% 14%, 98% 91%, 0% 100%);
clip-path: polygon(5% 7%, 91% 14%, 98% 91%, 0% 100%);
background: pink;
}
<div></div>
you can use:
clip-path: polygon(30px 0 , 250px 0, 200px 300px, 0 0);
Please see the example here: https://codepen.io/shakogele/pen/ZMZGGK
Related
I'm trying to create a pyramid. I figured I'd use the CSS clip-path for that. I meant to do a triangle (which I managed to do) and several trapezoids beneath it (even the first one failed).
.container {
min-width: 50%;
max-width: 50%;
}
.triangle {
background-color: yellow;
clip-path: polygon(90% 100%, 50% 0%, 10% 100%);
}
.trapeze {
background-color: blue;
clip-path: polygon(0% 10%, 0% 90%, 0% 100%, 100% 100%);
}
div {
min-height: 200px;
max-height: 200px;
border-color: black;
border-style: solid;
}
<div class="container">
<div class="triangle"></div>
</div>
<div class="container">
<dic class="trapeze"> </dic>
</div>
Finally, here's the result :
I'm not working with any framework and I am using Firefox 67
Use clip-path once then rely on gradient to simulate the different shapes:
.pyramid {
width:200px;
height:200px;
-webkit-clip-path:polygon(0 100%,100% 100%, 50% 0);
clip-path:polygon(0 100%,100% 100%, 50% 0);
background:
linear-gradient(to bottom,
yellow 0 20%,
red 20% 50%,
blue 50% 100%);
}
<div class="pyramid">
</div>
I'm looking to create this white arrow that goes inside the image with the HTML you can find in the snippet in a pure CSS way, not editing any HTML code.
.foto {
width: 100%;
float: left;
min-height: 215px;
background:
linear-gradient(to bottom right,transparent 50%,#fff 0) bottom right/10% 50% no-repeat, linear-gradient(to bottom left,#fff 50%,transparent 0%) top right/10% 50% no-repeat, url(https://s3.pagegear.co/1/contents/blog/2016/imagen_cachorro_comprimir.jpg) center/cover
}
<div class="foto bg_fix"><img src="https://s3.pagegear.co/1/contents/blog/2016/imagen_cachorro_comprimir.jpg" itemprop="image" width="724" height="230" style="display: none;"></div>
If you do not need to support Edge, you can get away with the clip-path. It's by far the easiest solution to your problem.
You can check the support on CanIUse
Also, amazingly helpful tool for this is Clippy, but don't forget to read about this technique on MDN - CSS clip-path.
.foto {
width: 100%;
float: left;
min-height: 215px;
-webkit-clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);
clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);
}
/* first value is X, and second value is Y coordinate. Feel free to experiment with percentages according to your needs. */
SOLUTION 2:
Old "trick" which has much much better support => CSS shapes.
You would basically need to create a new element (which is going to be your white triangle) and then put it on top of that image. Here's a sample code for a triangle that you need:
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red; /* red is just for display puproses */
border-bottom: 50px solid transparent;
}
<div id="triangle-left"><div>
Btw, you have both background-image and img tag in your html. Decide which one you want to use, and if you have problem with cropping the image, you may want to look into background position and/or object-fit.
You can correct you gradient like below. You were almost good, simply switch the position of both making the bottom one on the top and the top on on the bottom:
.foto {
min-height: 200px;
background:
linear-gradient(to bottom right,transparent 49.8%,#fff 50%) top right/10% 50%,
linear-gradient(to top right,transparent 49.8%,#fff 50%) bottom right/10% 50%,
url("https://s3.pagegear.co/1/contents/blog/2016/imagen_cachorro_comprimir.jpg") center/cover;
background-repeat:no-repeat;
}
<div class="foto bg_fix" ></div>
Hi,
I wonder whether it's possible to use more than one mask on the same element, just like this:
clip-path:polygon(8% 0%, 8% 7%, 14% 12%), polygon(96.4%, 92% 96.4%, 97% 92.3%), polygon(97% 15%, 99% 13%, 99% 0%);
With this I would be able to show only certain areas of the element that are separated from each other.
Thank you.
This is possible if you use clip-path with an SVG-defined <clipPath>
.clip-svg {
clip-path: url(#myClip);
}
<img class="clip-svg" src="https://picsum.photos/id/1015/600/400">
<svg width="0" height="0">
<defs>
<clipPath id="myClip">
<polygon points="400,50 400,320, 140,300"/>
<polygon points="450,10 500,200 600,100" />
<polygon points="150,10 100,200 300,100" />
</clipPath>
</defs>
</svg>
Confirmed working in Chrome 60, Firefox 55, Edge 85. Unfortunately doesn't work in IE.
Full browser support information here.
You can also use CSS to make one polygon which goes in and out of element bounds . See:
https://24ways.org/2018/clip-paths-know-no-bounds/
https://codepen.io/danwilson/pen/zMgrgb
div {
width: 80vmin;
height: 80vmin;
background: hsl(181, 90%, 52%);
clip-path: polygon(30px 20px, 40px 200px, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
<div></div>
You can use multiple mask. But you can't use multiple clip-path. You can use multiple masks with clip-path.
you can use mask property with clip-path to make multiple masks.
like this example.
#parent {
display: flex;
justify-content: center;
align-items :center;
height: 100vh;
width: 100vh;
background: linear-gradient(90deg, black 50%, yellow 50%);
}
.multiple_mask{
height: 200px;
width: 200px;
background: red;
clip-path: polygon(0% 0%, 50% 0%, 100% 50%, 50% 100%, 0% 100%, 50% 50%);
-webkit-mask-image: linear-gradient(45deg, black 50%, transparent 50%), linear-gradient(180deg, black, transparent);
mask-image: linear-gradient(45deg, black 50%, transparent 70%);
}
<div id="parent">
<div class="multiple_mask"></div>
</div>
Hope you understand
To use clip path for multiple clips you need to think of it like an etch-a-sketch. You have to complete the object and follow that line to the next object. Then come back to the previous object before moving to the next one.
img {
clip-path: polygon(14% 12%, 8% 0%, 8% 7%, 14% 12%, 87% 96.4%, 92% 96.4%, 97% 92.3%, 87% 96.4%, 14% 12%, 97% 15%, 99% 13%, 99% 0, 97% 15%, 14% 12% );
}
<img class="clip-svg" src="https://picsum.photos/id/1015/600/400"/>
When i create background gradient like this:
background: radial-gradient(ellipse at center, #ffffff 0%,#ffffff 59%,#ededed 100%);
I get ellipse that is inside the div, and conform to shape of div. So if div is large in height then ellipse would be stretched vertically. If div is a square then ellipse would be like a circle. That's fine, i want to control height of ellipse.
The exact question can be addressed by combining the last 2 answers: circle gradient and adjusting the background size.
Something like this:
div {
width: 300px;
height: 100px;
background: radial-gradient(circle, white 0%, red 50%, black 100%);
background-size: 100% 200%;
background-position: 0% 50%;
}
<div></div>
I find it less of a hassle than nested divs, and by playing with the background-position and size values, you can get some pretty cool effects!
Use a div with overflow set to hidden, and a div inside of it absolutely positioned with a fixed height.
#outer {
height: 100px;
overflow: hidden;
position: relative;
width: 200px;
}
#inner {
background: radial-gradient(ellipse at center, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
bottom: 0;
height: 150px;
position: absolute;
width: 200px;
}
<div id="outer">
<div id="inner"></div>
</div>
You can play with the background dimensions and position:
div {
width: 300px;
height: 100px;
background: radial-gradient(ellipse at center, white 0%, red 100%);
background-size: 100% 200%;
background-position: 0% 50%;
}
demo
You can try circle instead of ellipse:
Demo on dabblet
.rect2 {
width: 600px;
height: 100px;
line-height: 100px;
text-align: center;
background: radial-gradient(circle, #ffffff 0%, #ffffff 59%, #dcdcdc 100%);
}
Basically I want to create a shape in CSS only (so no images) that is the opposite of a heart shape. I don't know how to explain it properly so here is an image:
The blue is the background, as you can see, but the shape that I want to create is not a heart, it is the shape of the black rectangle.
If I would have the following shape (THE GRAY NOT THE BLACK)
I could duplicate it and then rotate it, that would give me the shape I am looking for.
Heart shape cut out using box-shadow
Let's create this — the blue is the background color of <body>
The pieces
Feel free to skip directly to the complete demo at the bottom of this answer :)
1 - The rounded corners
The rounded top left and top right corners are created with box-shadow on the two pseudo elements with border-radius: 50% — .heart:before and .heart:after — They form two crescent shapes that look like this:
2 - The angle
The angled shape is created by the box-shadow on .heart. Combined with the two circles, it looks like this:
3 - The filler
We now need to fill in the gaps. This is done by the pseudo elements of the .box-shape container — .shape-box:before and .shape-box:after. The excess is cut-off neatly with overflow: hidden on the .shape-box. Combined with our pieces above, they look like this:
The Complete Example
Combine it all together and we get this nicely cut out heart shape. It is all contained in .shape-box.
body {
background: #00A2F6;
}
.shape-box {
height: 504px;
width: 504px;
position: relative;
margin: 100px;
overflow: hidden;
}
.shape-box:before,
.shape-box:after {
content: '';
display: block;
height: 100px;
width: 120px;
background: #2B2B2B;
transform: rotate(45deg);
left: 190px;
position: absolute;
top: 40px;
}
.shape-box:after {
width: 760px;
height: 750px;
box-shadow: inset 0 0 0 220px #2B2B2B;
top: -150px;
left: -130px;
background: none;
}
.heart {
transform: rotate(45deg);
height: 357px;
width: 356px;
box-shadow: inset 0 0 0 50px #2B2B2B;
position: absolute;
left: 74px;
top: 34px;
}
.heart:before,
.heart:after {
content: '';
display: block;
width: 151px;
height: 151px;
border-radius: 50%;
box-shadow: -40px -15px 0 20px #2B2B2B;
position: absolute;
left: 50px;
top: 157px;
}
.heart:after {
box-shadow: -15px -40px 0 21px #2B2B2B;
left: 156px;
top: 51px;
}
<div class="shape-box">
<div class="heart"></div>
</div>
This can be done with a combination of svg gradients, multiple backgrounds, and a little creative tiling/placement. Sample CSS from my working jsfiddle (without vendor prefixes, i.e. -webkit and -moz):
height: 400px;
width: 400px;
background-image:
radial-gradient(75% 85.5%, circle, transparent 25%, black 26%),
radial-gradient(25% 85.5%, circle, transparent 25%, black 26%),
linear-gradient(225deg, transparent 25%, black 25%),
linear-gradient(135deg, transparent 25%, black 25%);
background-size: 200px 200px;
background-position: top left, top right, bottom left, bottom right;
background-repeat: no-repeat;
This makes a heart-shaped cutout in the middle of a 400px square element. It can be modified to fit whatever size element you want.
Update: here’s a more complex fiddle that uses six gradients instead of four, but looks a bit nicer.
Based on the work that Mark Hubbart did I was able to push this to a slightly more advanced form in this fiddle
This is not 100% complete yet as it will need some media queries to work across more browsers but it does show the start of a much more flexible working for the same goal.
#backgrounder {
z-index: 2;
background-image:
radial-gradient(68% 100%, circle, transparent 48%, white 30%),
radial-gradient(32% 100%, circle, transparent 48%, white 30%),
radial-gradient(110% 1%, circle, transparent 65%, white 30%),
radial-gradient(-8.5% 1%, circle, transparent 65%, white 30%),
linear-gradient(220deg, transparent 41%, white 30%),
linear-gradient(139deg, transparent 41%, white 30%);
background-image:
-webkit-radial-gradient(68% 100%, circle, transparent 48%, white 30%),
-webkit-radial-gradient(32% 100%, circle, transparent 48%, white 30%),
-webkit-radial-gradient(110% 1%, circle, transparent 65%, white 30%),
-webkit-radial-gradient(-8.5% 1%, circle, transparent 65%, white 30%),
linear-gradient(220deg, transparent 41%, white 30%),
linear-gradient(139deg, transparent 41%, white 30%);
background-size: 51% 31%, 50% 31%, 51% 50%, 50% 50%, 51% 51%, 50% 51%;
background-position: top left, top right, 0% 30%, 100% 30%, bottom left, bottom right;
background-repeat: no-repeat;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}