This question already has answers here:
Center triangle at bottom of div full width responsively
(6 answers)
Create bottom responsive arrow [duplicate]
(1 answer)
Closed 1 year ago.
I am working upon creating a HTML page that will have text written under shape, see pic for the reference. To draw this shape, I am using following:
#chevron {
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 60px;
width: 100%;
}
#chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: red;
transform: skew(0deg, 6deg);
}
#chevron:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: red;
transform: skew(0deg, -6deg);
}
<div style="width: 100%">
<div id="chevron">
</div>
</div>
However, the shape is pretty different than what I am trying to draw.
Here is the desired result:
You could use clip-path this website is great to get the hang of it
in your case you would need something like this :
clip-path: polygon(100% 0, 100% 15%, 50% 25%, 0 15%, 0 0);
Related
This question already has answers here:
Create wavy borders in CSS for top and bottom borders
(2 answers)
Closed 8 months ago.
This post was edited and submitted for review 8 months ago and failed to reopen the post:
Original close reason(s) were not resolved
I'm trying to make a wavy effect on the border of where one section meets another on a page (see pic below). What's the best approach to take here? The waves should be roughly equal in size.
EDIT: to the person who flagged this as 'already answered', the effect in your linked question looks nothing like this one. That effect cannot be used to make the low wide sloping waves in my image.
Please try this
body {
background: #333;
}
.wrapper {
width: 500px;
height: 500px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 5px;
background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
overflow: hidden;
}
.wave {
width: 1000px;
height: 1025px;
position: absolute;
top: -25%;
left: 50%;
margin-left: -500px;
margin-top: -500px;
border-radius: 35%;
background: rgba(255, 255, 255, .75);
animation: wave 15s infinite linear;
}
#keyframes wave {
from {
transform: rotate(0deg);
}
from {
transform: rotate(360deg);
}
}
<div class="wrapper">
<div class="wave"></div>
</div>
As shown in image , there is navy blue color given to div inclinedly, how can do it using bootstrap in asp.net core project?
You cannot do with bootstrap. However i have used CSS Path to create the same shape
You can use this website to make CSS Path
.backgroundCover {
height: 200px;
width: 200px;
background: blue;
border:1px solid black;
}
#clipPath {
height: 200px;
width: 200px;
background: white;
clip-path: polygon(0 0, 100% 0, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
<div class="backgroundCover">
<div id="clipPath">
</div>
</div>
You can also use the :after and :before pseudo elements to create rectangles and then rotate them. This has higher support rate by using transform instead of clip-path in terms of old browsers.
body { background: black; }
.container {
width: 200px;
height: 260px;
background: white;
overflow: hidden;
position: relative;
}
.container:before,
.container:after {
content: '';
width: 50%;
height: 50%;
position: absolute;
background: #0d2e41;
bottom: -25%;
}
.container:before {
transform: rotateZ(135deg);
left: -25%;
}
.container:after {
transform: rotateZ(225deg);
right: -25%;
}
<div class="container">
</div>
This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed 3 years ago.
I've attached a picture to show the exact layout. The line in the photo is only there to show where the colors should change.
Here is some code I have tried but doesn't look how I want.
.block {
background-color: black;
left: -50;
height: 150px;
width: 100%;
transform: rotate(-40deg);
}
<body>
<div class="block">
</div>
</body>
You can use pseudo element with skew transformation :
body {
height: 100vh;
margin: 0;
background: yellow;
}
body:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 300px;
background: #000;
transform: skew(-30deg);
transform-origin:top;
}
To keep the same visual on resize, set a big fixed height for the pseudo element and center it:
html {
background: yellow;
}
html:before {
content: "";
position: fixed;
top: calc(50% - 1000px);
left: 0;
width: 500px;
height:2000px;
background: #000;
transform: skew(-15deg);
transform-origin:top;
}
Use a linear gradient at an angle
body {
margin:0;
}
div {
height: 100vh;
background: linear-gradient(105deg, black 25%, yellow 25%)
}
<div></div>
.left-sidebar {
position: absolute;
width: 20%;
background: #000;
transform: skewY(5px);
}
.content {
background: #fff;
}
The property that "curves" the div is this property in CSS transform: skew(X,Y).Try that, hope it helps.
But I suggest that you create 2 div side-by-side in order to get the desired effect.
This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed 5 years ago.
I have been searching for a few days now for code to make the right edge of a div slant 45 degrees. Here is an image example of what I am particularly attempting to get...
There seems to be a lot of examples of 'slanted-edge' divs, but I can't find any with the particular right-side slanted.
I have spend a great deal of time trying to alter the codes of the others, but it ends up in a mess.
This is the original CSS code I was experimenting with to get the results I need...
div {
position: relative;
display: inline-block;
padding: 1em 5em 1em 1em;
overflow: hidden;
color: #fff;
}
div:after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: #000;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skew(-45deg);
-ms-transform: skew(-45deg);
transform: skew(-45deg);
z-index: -1;
}
body {
background:
url('https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg');
background-size: cover;
}
Here is the HTML....
<div>Slanted div text</div>
<div>
Slanted div text<br/>
on several lines<br/>
Another line
</div>
<div>Wider slanted div text with more text inside</div>
Create your div, then overlay an absolutely-positioned, rotated pseudo-element to create the slanted impression.
div {
height: 50px;
width: 300px;
background-color: black;
position: relative;
overflow: hidden;
}
div:after {
height: 100%;
width: 100%;
background-color: white;
position: absolute;
content: "";
transform: rotate(45deg);
transform-origin: bottom right;
}
<div></div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have to do the integration of a mockup. But I am wondering if there is a way to do it only in CSS.
We have a (diagonal) triangle section separator, and I don't know how to make them in CSS (except with image or svg). And if this is even possible?
My separator looks like this:
.
(It's a huge rectangle triangle at the top of the section).
I'm speaking of the part at the top of the blue line here:
.
Do you know if it's possible to do it with CSS rules?
And if so, how can I do this?
Something like this should do. Using vw (viewport-width) to span the entire container.
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 30px 100vw;
border-color: transparent transparent #007bff transparent;
}
<div class="triangle"></div>
You can attach this to a :before pseudo-selector on your container.
You will have to do some work for cross-browser compatibility however. See the caniuse on this for more information and updates on supported browsers.
Here's a CSS3 method:
JSFIDDLE
HTML
<section class="diagonal">
CSS
body {
background: #333;
margin: 0px;
}
section {
position: relative;
margin-top:100px;
}
section:before {
position: absolute;
content:'';
}
.diagonal {
background: teal;
z-index: 1;
padding: 3em;
}
.diagonal:before {
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
-webkit-transform-origin: 3% 0;
transform-origin: 3% 0;
top: 0;
left: -25%;
z-index: -1;
width: 150%;
height: 75%;
background: inherit;
}
Use an absolutely positioned border offset off the top of your container:
https://jsfiddle.net/Levde3kj/1/
HTML:
<div class="container">
<div class="triangle"></div>
</div>
CSS:
.container {
float: left;
width: 400px;
height: 200px;
margin-top: 25px;
background-color: blue;
position: relative;
}
.container .triangle {
position: absolute;
top: -25px;
left: 0;
border-style: solid;
border-width: 0 0 25px 400px;
border-color: transparent transparent blue transparent;
}