I need to create a responsive triangle <div>. I was able to create it using css skewed, but it is not responsive, when I change the screen width it gets messed up. Can someone help me? Thank you very much in advance!
Here is what I want:
This is the code I have so far:
.skewed-box-one:before {
background-color: red;
content: '';
height: 100px;
width: 30.05%;
display: block;
visibility: visible;
position: absolute;
top: -40px;
transform: skewY(8deg);
border-top: 3px solid #BBDEFB;
}
.skewed-box-one:after {
background-color: red;
content: '';
height: 130px;
width: 70%;
display: block;
visibility: visible;
position: absolute;
top: -46px;
right: 0;
transform: skewY(-4deg);
border-top: 3px solid #BBDEFB;
}
<div class="skewed-box-one"></div>
You could use CSS clip-path, do note that broswer support is limited. With this tool you can generate the shape you want.
.triangle1 {
clip-path: polygon(50% 0%, 100% 84%, 100% 100%, 0 100%, 0 84%);
background: red;
width: 100%;
height: 100%;
}
.triangle2 {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);;
background: red;
width: 100%;
height: 100%;
}
.container {
width: 50%;
height: 300px;
margin-bottom: 20px;
}
<div class="container">
<div class="triangle1">1</div>
</div>
<div class="container">
<div class="triangle2">2</div>
</div>
I could solve this problem with #SuperDJ help, usingclip-path. I also find this website that helps to draw shapes:
https://bennettfeely.com/clippy/
Here is the final code i used:
.triangle1 {
position: absolute;
-webkit-clip-path: polygon(21% 96%, 0 54%, 100% 54%);
clip-path: polygon(21% 96%, 0 54%, 100% 54%);
background: #BBDEFB;
width: 100%;
height: 200px;
margin-top: -40px;
}
Thanks very much everybody that tryed to help and a special thanks to #SuperDJ!
Here is another idea more supported than clip-path using background coloration
.box-down {
height:80px;
padding-bottom:50px;
background:
linear-gradient(to bottom right,red 48%, transparent 50%) bottom right/30% 50px,
linear-gradient(to bottom left ,red 48%, transparent 50%) bottom left/70.1% 50px,
red content-box;
background-repeat:no-repeat;
}
.box-up {
height:80px;
padding-top:50px;
background:
linear-gradient(to top right,red 48%, transparent 50%) top right/70% 50px,
linear-gradient(to top left ,red 48%, transparent 50%) top left /30.1% 50px,
red content-box;
background-repeat:no-repeat;
margin-top:20px;
}
<div class="box-down"></div>
<div class="box-up"></div>
so far I have this < hr > with the About Me text in a data-content.
I want to add a linear gradient border bottom with three colors under the text "About Me" like it is underlined. I've tried setting the background in the .section-divider:after to a linear gradient and padding and all that but it ends up setting the whole background as a linear gradient.
HTML:
<hr class="section-divider" data-content="ABOUT ME"></hr>
CSS:
.section-divider {
font-family: Lato-Regular;
line-height: 1em;
position: relative;
outline: 0;
border: 0;
color: black;
text-align: left;
height: 1.5em;
font-size: 20px;
}
.section-divider:before {
content: '';
background: black;
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 1px;
}
.section-divider:after {
content: attr(data-content);
position: relative;
display: inline-block;
color: black;
padding: 0 .5em;
line-height: 1.5em;
color: black;
background-color: white;
}
If anyone knows how to do this or a better way to do this hr with text aligned to the left better in general let me know, thank you!
.section-divider {
font-family: Lato-Regular;
line-height: 1em;
position: relative;
outline: 0;
border: 0;
color: black;
text-align: left;
height: 1.5em;
font-size: 20px;
}
.section-divider:before {
content: '';
background: black;
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 1px;
}
.section-divider:after {
content: attr(data-content);
position: relative;
display: inline-block;
color: black;
padding: 0 .5em;
line-height: 1.5em;
color: black;
background-color: white;
}
<hr class="section-divider" data-content="ABOUT ME"></hr>
You can use this code.
.section-divider {
font-family: Lato-Regular;
line-height: 1em;
position: relative;
outline: 0;
border: 0;
color: black;
text-align: left;
height: 1.5em;
font-size: 20px;
}
.section-divider:before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 1px;
margin: 0;
border: 0;
background: #333; /* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#34495e), color-stop(10%,#34495e), color-stop(10%,#207cca), color-stop(24%,#2989d8), color-stop(24%,#34495e), color-stop(42%,#34495e), color-stop(42%,#207cca), color-stop(70%,#207cca), color-stop(70%,#207cca), color-stop(70%,#34495e), color-stop(100%,#34495e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #34495e 0%,#34495e 10%,#207cca 10%,#2989d8 24%,#34495e 24%,#34495e 42%,#207cca 42%,#207cca 70%,#207cca 70%,#34495e 70%,#34495e 100%); /* Chrome10+,Safari5.1+ */
background-image: -moz-linear-gradient(left, #34495e 0%, #34495e 9%, #207cca 10%, #2989d8 24%, #34495e 24%, #34495e 42%, #207cca 42%, #207cca 70%, #207cca 70%, #34495e 71%, #34495e 100%);
background-image: -o-linear-gradient(left, #34495e 0%, #34495e 9%, #207cca 10%, #2989d8 24%, #34495e 24%, #34495e 42%, #207cca 42%, #207cca 70%, #207cca 70%, #34495e 71%, #34495e 100%);
background-image: linear-gradient(left, #34495e 0%, #34495e 9%, #207cca 10%, #2989d8 24%, #34495e 24%, #34495e 42%, #207cca 42%, #207cca 70%, #207cca 70%, #34495e 71%, #34495e 100%); /* Chrome10+,Safari5.1+ */
}
.section-divider:after {
content: attr(data-content);
position: relative;
display: inline-block;
color: black;
padding: 0 .5em;
line-height: 1.5em;
color: black;
background-color: white;
}
<hr class="section-divider" data-content="ABOUT ME" />
I want to make a div into 2 triangles (as shown in below, no problem if 1 is background of parent) upper one with one color and lower one with another. I dont mind how it is implemented but i want to do it in css (not javascript). I tried with css rotation, (code below), but its not responsive. In smaller or wider screen it is distorted . Any way to implement this in css?
body {
background: #eee;
}
.darker {
position: fixed;
top: -94%;
left: -10%;
width: 150%;
height: 150%;
background: #dd4f39;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
<div class="darker"> </div>
I found an interesting way to do this from here, which uses clip-path
.Answering my own question so that everyone can use it.
html,
body {
margin: 0;
}
body {
background: #eee;
}
.box {
width: 100vw;
height: 100vh;
background-color: #dd4f39;
clip-path: polygon(0 0, 100% 0, 100% 100%);
}
<div class="box"></div>
This is one way of doing it. But this use case is strictly with respect to vw. Just make sure to give the same value to these elements
div and it's pseudo element should have same width and border-left respectively.
div and it's pseudo element should have same height and border-top respectively.
html, body {
margin: 0;
}
.box {
width: 100vw;
height: 100vh;
background-color: white;
}
.box::after {
content: ' ';
border-top: 100vh solid #dd4f39;
border-left: 100vw solid transparent;
width: 0;
position: absolute;
}
<div class="box"></div>
JS fiddle
https://jsfiddle.net/kqsrmrss/2/
You can do that with a skewed pseudo element. The main trick is to keep the aspect ratio the same or else the sloped angle will fail
Fiddle demo
Stack snippet Note 1
body {
background: #eee;
}
.darker {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-top: 50%;
background: #dd4f39;
overflow: hidden;
}
.darker::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: gray;
transform: skewY(26.5deg);
transform-origin: left top;
}
<div class="darker"></div>
Optionally, you can add media query to control the angle at different screen sizes
Fiddle demo 2
With a tiny script running when window resize's, you can control the angle and make it fully responsive both horizontally and vertically.
Note 1 Based on a comment, the Stack snippet might not work properly, and if, try the fiddle demos.
Please Use this code snippet.
div {
width: 100%;
height: 100px;
}
.diagonalRising {
border: 1pt solid black;
background: linear-gradient(to right bottom, #eeeeee 0%, #eeeeee 49.9%, #eeeeee 50%, #000000 51%, #dd4f39 51.1%, #dd4f39 100%);
}
.diagonalFalling {
background: linear-gradient(to right top, #eeeeee 0%, #eeeeee 49.9%, #000000 50%, #000000 51%, #dd4f39 51.1%, #dd4f39 100%);
}
.diagonalCross {
position: relative;
background: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 49.9%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(0, 0, 0, 0) 51.1%, rgba(0, 0, 0, 0) 100%);
}
.diagonalCross:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: linear-gradient(to right top, #ffffff 0%, #ffffff 49.9%, #000000 50%, #000000 51%, #ffffff 51.1%, #ffffff 100%);
}
<div class="diagonalRising"></div>
<div class="diagonalFalling"></div>
<div class="diagonalCross"></div>
Try this,
.box::after {
background: #E52A35
content: '';
position: absolute;
width: 100%;
height: 100vh;
background-color: #dd4f39;
clip-path: polygon(52% 13%, 104% -1%, -1% 0%);
}
I'm working on a news aggregation site's homepage and we're supposed to have a couple of areas that pull in content with the photo in the background and text on top with a gradient between the two. For the most part I have it except even though the z-index is lower, the gradient still appears above the text box. I've already experimented with this on a solid background just to be sure. The code and example are here: http://jsfiddle.net/cx0uvshd/
<style type="text/css">
.feature {
position: relative;
float: left;
width: 465px;
height: 170px;
margin-top: 24px;
margin-right: 30px;
}
.feature.last {
margin-right: 0;
}
.feature-bottom {
background: none;
position: absolute;
bottom: 0;
left: 0;
padding: 0 30px 6px;
width: 100%;
z-index: 200;
line-height: 1;
}
.feature-bottom::after {
content: "";
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
background: rgba(0,0,0,0);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,0.5)), color-stop(100%, rgba(0,0,0,0.5)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
}
.feature-bottom h3 {
color: #FFF;
font-size: 15px;
font-weight: 400;
margin: 0;
}
.feature-bottom h2 {
color: #FFF;
font-size: 24px;
font-weight: 400;
margin: 0;
}
</style>
Add (position:relative) and (z-index:201) to your feature-bottoms h3 and h2. Find revised code below:
.feature { position: relative; float: left; width: 465px; height: 170px; margin-top: 24px; margin-right: 30px; }
.feature.last { margin-right: 0; }
.feature-bottom {
background: none;
position: absolute;
bottom: 0;
left: 0;
padding: 0 30px 6px;
width: 100%;
z-index: 200;
line-height: 1;
}
.feature-bottom::after {
content: "";
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
background: rgba(0,0,0,0);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,0.5)), color-stop(100%, rgba(0,0,0,0.5)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
}
.feature-bottom h3 { position:relative; z-index:201; color: #FFF; font-size: 15px; font-weight: 400; margin: 0; }
.feature-bottom h2 { position:relative; z-index:201; color: #FFF; font-size: 24px; font-weight: 400; margin: 0; }
Why not applying gradient to .feature-bottom? Like this:
http://jsfiddle.net/cx0uvshd/2/
In the current version you have the :before element overlaying despite bigger z-index. You need new stacking context
Here's a similar question
A not so clean solution is to add another div with the content below the gradient one. Then give that div a class that is a copy of feature-bottom. Then set color of feature-bottom to transparent to hide the text. Also change the last two selectors to use the copy class. Also duplicate the last two selectors to use for the new class. JsFiddle
CSS:
.feature { position: relative; float: left; width: 465px; height: 170px; margin-top: 24px; margin-right: 30px; }
.feature.last { margin-right: 0; }
/*Copy of feature bottom*/
.feature-bottom2 {
background: none;
position: absolute;
bottom: 0;
left: 0;
padding: 0 30px 6px;
width: 100%;
z-index: 200;
line-height: 1;
}
.feature-bottom {
color: transparent;
background: none;
position: absolute;
bottom: 0;
left: 0;
padding: 0 30px 6px;
width: 100%;
z-index: 200;
line-height: 1;
}
.feature-bottom::after {
content: "";
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
background: rgba(0,0,0,0);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,0.5)), color-stop(100%, rgba(0,0,0,0.5)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
}
/* Copy of below*/
.feature-bottom2 h3 { color: #FFF; font-size: 15px; font- weight: 400; margin: 0; }
.feature-bottom2 h2 { color: #FFF; font-size: 24px; font-weight: 400; margin: 0; }
.feature-bottom h3 { font-size: 15px; font-weight: 400; margin: 0; }
.feature-bottom h2 { font-size: 24px; font-weight: 400; margin: 0; }
I'm currently designing a website, and for the footer I've created a "zigzag" border on top.
To create some depth in the website, I wanted to add a drop shadow on the triangles in the "zigzag", and this is where I'm currently stuck.
Here is an example of the footer as I have it right now: http://jsfiddle.net/CwXp4/
body {
background: url(http://i.imgur.com/R1yaNOy.png);
}
#footer {
position: absolute;
width: 100%;
height: 200px;
bottom: 0;
background-color: #333;
}
#footer:before {
content: "";
display: block;
position: relative;
top: -21px;
height: 21px;
background: linear-gradient( 45deg, #333 50%, transparent 50%) 0 0, linear-gradient(-45deg, #333 50%, transparent 50%) 0 0;
background-repeat: repeat-x;
background-size: 40px 40px, 40px 40px;
}
<div id="footer"></div>
Is there someone out there with some tips for me on how to add a drop shadow?
You can somehow make the shadow with the same gradients that you are using to make the zigzag.
CSS
#footer:before {
content: "";
display: block;
position: relative;
top: -21px;
height: 22px;
background: linear-gradient( 45deg, #333 50%, blue 50%, transparent 55%) 0 0,
linear-gradient(-45deg, #333 50%, blue 50%, transparent 55%) 0 0;
background-repeat: repeat-x;
background-size: 40px 47px, 40px 47px;
}
body {
background: url(http://i.imgur.com/R1yaNOy.png);
}
#footer {
position: absolute;
width: 100%;
height: 200px;
bottom: 0;
background-color: #333;
}
#footer:before {
content: "";
display: block;
position: relative;
top: -21px;
height: 22px;
background: linear-gradient( 45deg, #333 50%, blue 50%, transparent 55%) 0 0, linear-gradient(-45deg, #333 50%, blue 50%, transparent 55%) 0 0;
background-repeat: repeat-x;
background-size: 40px 47px, 40px 47px;
}
<div id="footer"></div>
fiddle
You could also get the shadow with a webkit-filter shadow, but this has limited support
CSS
#footer:before {
content: "";
display: block;
position: relative;
top: -21px;
height: 22px;
background: linear-gradient( 45deg, #333 50%, transparent 50%) 0 0,
linear-gradient(-45deg, #333 50%, transparent 50%) 0 0;
background-repeat: repeat-x;
background-size: 40px 47px, 40px 47px;
-webkit-filter: drop-shadow(red 0px -5px 5px);
}
body {
background: url(http://i.imgur.com/R1yaNOy.png);
}
#footer {
position: absolute;
width: 100%;
height: 200px;
bottom: 0;
background-color: #333;
}
#footer:before {
content: "";
display: block;
position: relative;
top: -21px;
height: 22px;
background: linear-gradient( 45deg, #333 50%, transparent 50%) 0 0, linear-gradient(-45deg, #333 50%, transparent 50%) 0 0;
background-repeat: repeat-x;
background-size: 40px 47px, 40px 47px;
-webkit-filter: drop-shadow(red 0px -5px 5px);
}
<div id="footer"></div>
fiddle with filter