I'm trying to create a diagonal div with SVG and I'm having a lot of issues.
My goal is:
Create full-width map on the top left corner.
Create full-width div of text on the bottom right corner.
I have worked on it but the SVG div overlapping the map and I can't select map and if I position map higher than SVG than map overlaps entire page.
You can see in the image what I want to achieve should look like.
I would use clip-path to do the job. AFAIK it's the only think able to achieve desired effect without JS and without assumption, that rectangle with map is a square. Support, unfortunately, isn't perfect. I also found interesting creator for clip paths.
More about 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.
Unfortunetely it doesn't work on IE, but here you can find some fallback workarounds.
Snippet
.container {
position: relative;
height: 250px;
width: 250px;
background: black;
}
.map {
height: 100%;
width: 100%;
background: red;
-webkit-clip-path: polygon(100% 0, 0% 100%, 0 0);
clip-path: polygon(100% 0, 0% 100%, 0 0);
}
.corner {
position: absolute;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
background: green;
-webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
<div class="container">
<div class="map"></div>
<div class="corner"></div>
</div>
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'm trying to define a rotation of an element depending on viewport width in CSS.
Here with a "hard" "transform: rotate(-3.4deg);" :
https://i.postimg.cc/3NqY2Hzy/rotate-1.jpg
I'd like here more angle on smaller viewport width :
https://i.postimg.cc/SQHKX64g/rotate-2.jpg
I tried things like calc(12deg * 5vw) (and any other viewport's size variables units) but none seem compatible with an angle unit.
I could do it in javascript but I'm afraid it would show a bad glitch at page loading on slow computers / connections. I would like to avoid touching to top and bottom dividers, they are generated by a wordpress' theme.
Edit : The element I'm trying to dynamically rotate is the one containing the 3 texts.
If you forget angles but turn to using clip-path you can have a couple of pseudo elements on your element which have backgrounds one of darker and one of lighter green.
As the clip-paths are defined in terms of the percentage amounts rather than actual angles they automatically adjust to different viewports without the need for media queries:
div {
position: relative;
width: 100vw;
height: 30vw;
display: inline-block;
}
div::before,
div::after {
content: '';
position: absolute;
display: inline-block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
div::before {
z-index: -2;
background-color: lightgreen;
clip-path: polygon(0 0, 100% 0%, 0 35%, 0 100%, 100% 70%, 100% 95%, 0 100%);
}
div::after {
z-index: -1;
background-color: green;
clip-path: polygon(0 0, 100% 0, 0 25%, 0 100%, 100% 75%, 100% 100%, 0 100%);
}
<div></div>
I am struggling to create the above design of the green background, two white triangles and blue dots on the point of the triangles.
I have to create two triangles using W3School tutorial but they are not responsive causing issues. I have created the green background in PS with white triangles and blue dots but cannot get the image to sit in the same position across screen sizes.
Any help in creating the above using HTML/CSS would be great.
You can use clip-path on a pseudo element to create the graph-like zig zag and background images on another pseudo element to place the blue dots.
It is important to note that everything has to be done in relative terms, e.g. %s, so that the whole is responsive.
While this is pretty straightforward for the zig zag, adjustments have to be made to the placing of the dots as things are placed relative to their top left corner not relative to their center, which is what we require for the circles.
Also the height of the 'background' (the zigzag plus a little bit below the green to accomodate the circle at the bottom) has to be specified in terms of the width. Eventually CSS aspect-ratio will be useful for this but just at the moment not all browsers support it so this snippet uses the well-known hack of defining an element's height in terms of padding (the units for which are always the width's).
* {
padding: 0;
margin: 0;
}
.graphbg {
background: white;
width: 100vw;
height: 100vh;
position: relative;
margin: 0;
padding: 0;
}
.graphbg::before,
.graphbg::after {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: hidden;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1;
overflow: hidden;
--w: 4;
/* set these so --w/--h is the proportion of width to height you want this background to have */
--h: 1;
/* soon you will be able to use aspect-ratio: 4 / 1 but currently, August 2021, Safari IOS does not support it */
height: 0;
padding-top: calc( var(--h) / var(--w) * 100%);
/* to force the element to have the right height */
}
.graphbg::before {
background: green;
clip-path: polygon(0 0, 98% 0, 50% 95%, 25% 50%, 0 95%);
}
.graphbg::after {
background-image: radial-gradient(circle, blue 0 70%, transparent 70% 100%), radial-gradient(circle, blue 0 70%, transparent 70% 100%), radial-gradient(blue 0 70%, transparent 70% 100%), radial-gradient(blue 0 70%, transparent 70% 100%);
background-repeat: no-repeat;
background-size: 2% 8%;
background-position: -1% 99%, 24.5% 50%, 50% 97%, 99% -4%;
}
<div class="graphbg"></div>
I'm looking for a way to do this:
https://imgur.com/j7uMWwj.jpg
I add a clip-path to do the shield shape, but I just don't see how I can add this outline following the shape... Outlines or borders just do not follow shapes.
I tried something like this :
.shield_mask{
position: relative;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
&:before{
position: absolute;
background-color: transparent;
top: 12px; /* equal to border thickness */
left: 12px; /* equal to border thickness */
width: 327px; /* container height - (border thickness * 2) */
height: 317px; /* container height - (border thickness * 2) */
-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
-webkit-box-shadow:inset 1px 1px 0 0 #FFF;
box-shadow:inset 1px 1px 0 0 #FFF;
}
}
Not working... I tried with gradients too...
Does anyone have an idea ?
As you noted in your question, borders and outlines do not follow the clip-path outline. This is by design: " A clipping path is conceptually equivalent to a custom viewport for the referencing element. Thus, it affects the rendering of an element, but not the element's inherent geometry. The bounding box of a clipped element (meaning, an element which references a element via a clip-path property, or a child of the referencing element) must remain the same as if it were not clipped." -- developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath
I don't believe it's possible to accomplish this with CSS alone. But it is possible to do it with CSS and SVG. It's a bit manual and fiddly, but essentially you would need to create an SVG that mimics the inset border you're after and overlay it as a pseudo element on a div with a background image.
Not at all what you were trying to do, but it visually mimics the look you're after.
Hopefully, another contributor will wow us with some CSS wizardry, but until then, if you just really need to get it coded, you can try something like the following...
HTML
<div class="shield_mask" style="background-image: url(http:placehold.it/200x300)" " alt=" ">
</div>
CSS
.shield_mask {
width: 200px;
height: 300px;
display: block;
position: relative;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}
.shield_mask::after {
content: "";
height: 100%;
width: 100%;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url("data:image/svg+xml,%3Csvg width='200' height='300' viewBox='0 0 200 300' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 13H188V259.233L103.01 286.045L12 259.248V13ZM14 15V257.752L102.99 283.955L186 257.767V15H14Z' fill='white'/%3E %3C/svg%3E ");
z-index: 1000;
background-repeat: no-repeat;
}
See codepen here: https://codepen.io/anon/pen/KYavGq
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>