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>
Related
Does anyone has a solution for this css gradient?
Gradient
This is the css I use now:
background: transparent radial-gradient(closest-side at 50% 50%, #202020 0%, #202020BC 18%, #82DB563C 100%, #83DC563B 100%) 0% 0% no-repeat padding-box;
border: 1px solid #83DC56;
opacity: 1;
You an use an ellipse at top to get this kind of effect. Here's an example I made for you. You of course can play around with the colors to get it to what you want.
div {
background: transparent radial-gradient(ellipse at top, #202020 40%, #006400 100%, #39FF14 100%);
border: 1px solid #83DC56; opacity: 1;
height: 100px;
width: 700px;
}
<div></div>
good afternoon everyone, due to the css room being empty i come here to ask you for support in relation to the css, i'm trying to make a water drop effect, but so far i haven't been able to do that ... will it be possible to show me the right way? I already tested SVG shape element and Clip Path (Mask) CSS, but I couldn't get the format ... the idea would be to apply this effect to an image ...
evry time i implemente the css the image rotates:
https://ibb.co/J3sVQyn
this is the code i'm using css and react call:
.CardComponent-media-4 {
width: 145px;
height: 169px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
flex-basis: 20%;
z-index: 50;
border-radius: 50%;
border-top: 145/2 ;
border-left: 145/2;
border-bottom: 145/2;
border-left: 145/2;
border-top-right-radius: 0;
transform: rotate(45deg);
}
<CardMedia image={imageUrl} title={title} className={classes.media} />
You are almost good, simply make the image rotate in the opposite direction by considering another element:
.box {
width:150px;
height:150px;
position:relative;
border-radius:50% 0 50% 50%;
margin:50px;
transform:rotate(-45deg);
overflow:hidden;
}
.box:before {
content:"";
position:absolute;
top:-20%;
left:-20%;
right:-20%;
bottom:-20%;
background: center/cover;
background-image:inherit;
transform:rotate(45deg);
}
<div class="box" style="background-image:url(https://i.picsum.photos/id/1074/800/800.jpg)"></div>
Another idea using mask:
img {
width: 175px;
height: 200px;
-webkit-mask:
linear-gradient(to bottom right,transparent 48%,#fff 50%) 17% 0% /40% 40%,
linear-gradient(to bottom left ,transparent 48%,#fff 50%) 83% 0%/40% 40%,
radial-gradient(circle farthest-side at 50% 31%,#fff 90%,transparent 91%) bottom/100% 60%;
-webkit-mask-repeat:no-repeat;
mask:
linear-gradient(to bottom right,transparent 48%,#fff 50%) 17% 0% /40% 40%,
linear-gradient(to bottom left ,transparent 48%,#fff 50%) 83% 0%/40% 40%,
radial-gradient(circle farthest-side at 50% 31%,#fff 90%,transparent 91%) bottom/100% 60%;
mask-repeat:no-repeat;
}
<img src="https://i.picsum.photos/id/1074/800/914.jpg" >
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
I want to keep uploaded image inside a hexagonal frame. I generated css from this website and it works fine in some browser.
Code:
.frame-1 {
width: 300px;
height: 320px;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 98%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 98%, 0% 75%, 0% 25%);
}
But, It don't work on some other major browser like firefox etc.
So, I tried to use a transparent background shaped image over the main image. But, I cannot make it working!
Code:
<div class="frame-2">
<img src="image.jpg">
<div class="mask"></div>
</div>
.frame-2 {
width: 300px;
height: 320px;
position: relative;
}
.mask {
background: url('http://i.imgur.com/M40TJ9Z.png') no-repeat;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0
}
What is the best way to make it which supports all the major browsers? Thanks in advance.
Fiddle Work Demo
I have a shape with an edge like this in Photoshop:
Is it possible to make the repeated triangles as a border with CSS?
You can use gradients to create a zig-zag patterned background, use the ::after pseud-element to apply it like a border.
.header{
color: white;
background-color: #2B3A48;
text-align: center;
}
.header::after {
content: " ";
display: block;
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 36px;
background: linear-gradient(#2B3A48 0%, transparent 0%), linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
background-repeat: repeat-x;
background-size: 0px 100%, 9px 27px, 9px 27px;
}
<div class="header"><h1>This is a header</h1></div>
Source: CSS Zigzag Border with a Textured Background
JSFiddle: http://jsfiddle.net/kA4zK/
For future viewers, I found this adaptation of #extramaster's answer to be a little simpler.
It's essentially the same, but it uses one fewer background gradients and allows the backing object (.navbar in my markup) to show through instead of hard-coding the second color into the zig-zag.
JsFiddle: http://jsfiddle.net/861gjx0b/2/
.header {
position: relative;
color: white;
background-color: #2B3A48;
text-align: center;
}
.navbar {
background: #272220;
height: 20px;
}
.header:after {
content: "";
position: absolute;
display: block;
height: 10px;
bottom: -10px;
/* -height */
left: 0;
right: 0;
/* TODO Add browser prefixes */
background: linear-gradient( 45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%), linear-gradient( -45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%);
background-size: 8px 20px;
/* toothSize doubleHeight */
background-position: 0 -10px;
/* horizontalOffset -height */
}
<div class="header">
<h1>This is a header</h1>
</div>
<nav class="navbar"></nav>
Personally, I think clip-path is easier to work with/understand than complex background gradients.
body {
font-family:Roboto,'Open Sans',Helvetica,sans-serif;
}
.container {
background:#ddd;
margin:0 auto;
max-width:800px;
padding:30px;
}
h1:first-child {margin:0;}
.jagged-bottom {
position:relative;
}
.jagged-bottom:after {
background:#ddd;
content:"";
height:2vw;
position:absolute;
top:100%;
left:0;
right:0;
clip-path:polygon(
0 0, 2.5% 100%, 5% 0, 7.5% 100%,
10% 0,12.5% 100%,15% 0, 17.5% 100%,
20% 0,22.5% 100%,25% 0, 27.5% 100%,
30% 0,32.5% 100%,35% 0, 37.5% 100%,
40% 0,42.5% 100%,45% 0, 47.5% 100%,
50% 0,52.5% 100%,55% 0, 57.5% 100%,
60% 0,62.5% 100%,65% 0, 67.5% 100%,
70% 0,72.5% 100%,75% 0, 77.5% 100%,
80% 0,82.5% 100%,85% 0, 87.5% 100%,
90% 0,92.5% 100%,95% 0, 97.5% 100%, 100% 0);
}
<div class="container jagged-bottom">
<h1>Looks Like A Receipt</h1>
<p>Simply adjust the clip path on the pseudo-element if you want more or fewer spikes, and the height if you want them to be taller or shorter.</p>
</div>
There is a border-image property in CSS3.
Maybe you can work it out in a way you want. More here:
https://developer.mozilla.org/en-US/docs/Web/CSS/border-image
Or here
https://www.w3schools.com/cssref/css3_pr_border-image.asp
You can create an individual triangle using CSS quite easily (just tweak border properties). In order for this to work you will need to generate quite a bit of markup yourself. I would recommend against this approach.
Instead you are likely better off using an individual image containing a single triangle (preferably a transparent .png) and then use background-image and background-repeat (repeat-x) properties to bind that to a div (your "border").
Unfortunately there is no yet a straight-forward way to achieve this using pure CSS.