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
Related
This question already has answers here:
Cut Corners using CSS
(16 answers)
Closed 6 months ago.
I would like to create a button with a special shape (border) like the attached image. Is that even possible with css?
I tried to replicate this button but there are some issues with it:
I have used clip-path property to draw a custom border for the button, however, you have to mention the height and width properties separately or instead just let it span the default length, i.e. it's container dimensions but I had to mention height and width properties due to the reason in the following points
Thanks to this answer for a similar problem of adding border to a clipped path element, which states that it's not possible to add a border to a 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. I used the solution that's mentioned in that answer, which is use a div as the background of this button with slightly bigger dimensions with the same clipped path but of different color which acts as a border to the button
Finally, I had to mention the dimensions of the parent div which acts as a background so that I could know the exact values of the dimension of the container and hence I could use them to know how much height and width should the button have
div {
display: inline-block;
position: relative;
background: red;
-webkit-clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0 100%, 0 0);
clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0 100%, 0 0);
height: 60px;
width: 140px;
}
button {
position: absolute;
top: 2px;
left: 2px;
height: 56px;
width: 136px;
-webkit-clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0 100%, 0 0);
clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0 100%, 0 0);
font-size: 20px;
text-align: center;
color: white;
background: pink;
border: none;
}
<div class="btn_bg">
<button>Certified?<br>Let us know</button>
</div>
you can use this code with clip-path
.outside {
position: relative;
width: 70vmin;
height: 23vmin;
background: tomato;
clip-path: polygon(85% 0%, 85% 68%, 68% 100%, 0% 100%, 0% 78%, 0% 0%, 0% 0%);
}
.inside {
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
background: white;
clip-path: polygon(85% 0%, 85% 68%, 68% 100%, 0% 100%, 0% 78%, 0% 0%, 0% 0%);
border:none;
}
<div class="outside">
<button class="inside">
</button>
</div>
I was asked with making such a background on a responsive site. I thought about preparing two divs using gradient, but it is highly problematic. Is it even possible to do it? Using this as a background-image is cumbersome for higher and lower resolutions.
Any ideas?
some clip-path and pseudo element can approximate this:
.box {
width: 300px;
aspect-ratio: .8;
position: relative;
z-index: 0;
}
.box:before,
.box:after {
content: "";
position: absolute;
z-index: -1;
inset: 0;
}
.box:before {
clip-path: polygon(0 0, 100% 50%, 10% 100%,0 100%);
background: linear-gradient(40deg, #3185c5, #0ea1b1);
}
.box:after {
clip-path: polygon(100% 30%, 100% 50%, 10% 100%,0% 100%, 0 80%);
background: linear-gradient(40deg, #3185c5, #f55778);
}
<div class="box"></div>
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>
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
here the css
I used search for my problem, but I couldn't find any similar question. I have prblem with CSS on Firefox. "clip-path:" doesn't show.
.clip {
/* PLACE IN THE BEFORE AREA */
content:"";
width: 100%;
max-width: 100%;
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(58, 60, 69, .6);
-webkit-clip-path: polygon(50% 100%, 100% 90%, 100% 0%, 0% 0%, 0 90%);
clip-path: polygon(50% 100%, 100% 90%, 100% 0%, 0% 0%, 0 90%);
}
Minimum viable example: https://jsfiddle.net/sheriffderek/d30dpveh/
List of browsers and versions you can expect this to be applied: http://caniuse.com/#feat=css-clip-path (no Microsoft support)
More docs
https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
markup
<div class="thing"></div>
styles
.thing {
width: 200px;
height: 200px;
background: red;
-webkit-clip-path: polygon(50% 100%, 100% 90%, 100% 0%, 0% 0%, 0 90%);
clip-path: polygon(50% 100%, 100% 90%, 100% 0%, 0% 0%, 0 90%);
}
Whenever possible - you can try something like 'autoprefixer' to automatically add the prefixes for you - and ensure that moz and webkit etc area all added when they need to be there.