I am trying to get two divs to fit the full width of the page but split in half with a diagonal line.
How can I achieve this with two divs through CSS? it is for a slider and needs content added to each part when finished
It can be something like this
Example 1
div {
min-height: 100px;
background: #D25A1E;
position: relative;
width: calc(50% - 30px);
}
.div1 {
float: left;
}
.div2 {
float: right;
}
.div1:after, .div2:before {
content:'';
position: absolute;
top: 0;
width: 0;
height: 0;
}
.div1:after {
left: 100%;
border-top: 100px solid #D25A1E;
border-right: 50px solid transparent;
}
.div2:before {
right: 100%;
border-bottom: 100px solid #D25A1E;
border-left: 50px solid transparent;
}
<div class="div1"></div>
<div class="div2"></div>
fiddle
Example 2
div {
background: #D25A1E;
min-height: 100px;
width: calc(50% - 25px);
position: relative;
}
.div1 {
float: left;
}
.div2 {
float: right;
}
div:after {
position: absolute; top: 0px;
content:'';
z-index: -1;
height: 100%;
width: 50%;
background: #D25A1E;
}
.div1:after {
right: 0;
transform-origin: bottom right;
transform: skewX(-20deg);
}
.div2:after {
left: 0;
transform-origin: top left;
transform: skewX(-20deg);
}
<div class="div1"></div>
<div class="div2"></div>
fiddle
Example 3
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.blocks {
display: flex;
padding: 1em;
}
.block {
background-color: #D25A1E;
min-height: 100px;
width: 50%;
width: calc(50% + 2rem);
}
.block--left {
clip-path: polygon(0 0, 100% 0, calc(100% - 3rem) 100%, 0% 100%);
}
.block--right {
margin-left: -2rem;
clip-path: polygon(3rem 0, 100% 0, 100% 100%, 0% 100%);
}
<div class="blocks">
<div class="block block--left"></div>
<div class="block block--right"></div>
</div>
Related
Hi i am trying to make the following:
They triangles should be about 40% in height of the container, and 50% in width, so they meet in the middle.
I have been trying to make something similar.. but unsuccessfull so far..
And looking around, i have found nothing i could use so far.
my code:
div {
height: 373px;
width: 0px;
margin: 26px;
display: inline-block;
}
.left {
border-bottom: 100px solid #ff0;
border-left: 320px solid transparent;
}
.right {
border-bottom: 100px solid #f00;
border-right: 320px solid transparent;
}
header {
border: 2px solid black;
width: 50%;
height: 500px;
}
<header>
<div class="right"></div>
<div class="left"></div>
</header>
hoping for someone smarter than me to see where i should go from here...
Use background coloration like below:
.box {
height:300px;
background:
/* Right bottom triangle*/
linear-gradient(to bottom right,transparent 49.5%,blue 50%) bottom right,
/* left bottom triangle*/
linear-gradient(to bottom left ,transparent 49.5%,red 50%) bottom left ,
yellow;
background-size:50% 40%; /* Width height*/
background-repeat:no-repeat;
}
<div class="box">
</div>
Related answer for more details: How do CSS triangles work?
Another idea with pseudo elements (that you can replace with common elements) in case you want to have different elements.
.box {
height: 300px;
background: yellow;
position: relative
}
.box:before,
.box:after {
content: "";
position: absolute;
height: 40%;
width: 50%;
bottom: 0;
}
.box:before {
left: 0;
background: linear-gradient(to bottom left, transparent 49.5%, red 50%);
}
.box:after {
right: 0;
background: linear-gradient(to bottom right, transparent 49.5%, blue 50%);
}
<div class="box">
</div>
Since you need percent values, you can use clip-path. Beware that it may not be supported fully on some browser https://caniuse.com/#feat=css-clip-path and for some you may need prefixes (e.g. -webkit-clip-path)
.wrap {
height: 200px;
width: 100%;
position: relative;
background: #333;
}
.triangle {
background: red;
clip-path: polygon(0 40%, 0% 100%, 100% 100%);
position: absolute;
left: 0;
bottom: 0;
top: 0;
width: 50%;
}
.triangle.tr-right {
left: auto;
right: 0;
clip-path: polygon(100% 40%, 0% 100%, 100% 100%);
}
<div class="wrap">
<div class="triangle tr-left"></div>
<div class="triangle tr-right"></div>
</div>
JSFiddle
Clip-path created with Clippy
* {
box-sizing: border-box;
}
.triangular-pointer-box {
display: flex;
align-items: center;
background: #161616;
padding: 20px;
padding-left: 120px;
height: 200px;
position: relative;
width: 80%;
}
.triangular-pointer-box > h3 {
color: #fff;
}
.triangular-pointer-box:after {
content: "";
width: 0;
height: 0;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid #161616;
position: absolute;
right: -100px;
top: 0;
}
.triangular-pointer-box:before {
content: "";
width: 0;
height: 0;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid #ffffff;
position: absolute;
left: 0;
top: 0;
}
<div class="triangular-pointer-box">
<h3>Title goes here</h3>
</div>
I want to create something like the following screenshot, but I can't figure out any z-index value for which the shadow doesn't appear either over the first or second box (they are always stacked either with the first one on top, or the second).
Is there a way to achieve the following?
body { background: darkgrey; padding-top: 50px}
div { background: white; width: 200px; height: 200px; box-shadow: 0 0 20px
black; margin: auto; position: relative; }
#box-one { left: -50px; z-index: 1; }
#box-two { right: -50px; z-index: 1; }
https://codepen.io/eoghanmurray/pen/oVEEVK
If you can use filter and drop-shadow then you can apply a drop-shadow to the container. This shadow differs as it conforms to the alpha channel of the image (in this case, the outline of the content) instead of a simple rectangle:
body {
background: darkgrey;
padding-top: 50px
}
#box-one,
#box-two {
background: white;
width: 200px;
height: 200px;
margin: auto;
position: relative;
}
#box-one {
left: -50px;
z-index: 1;
}
#box-two {
right: -50px;
z-index: 1;
}
#top {
filter: drop-shadow(0 0 20px black);
}
<div id="top">
<div id="box-one"></div>
<div id="box-two"></div>
</div>
You can consider drop-shadow filter on a parent element:
body {
background: pink;
}
.b1,
.b2 {
width: 150px;
height: 150px;
background: #fff;
}
.b2 {
margin-left: 100px;
}
.container {
filter:drop-shadow(0 0 10px #000);
}
<div class="container">
<div class="b1"></div>
<div class="b2"></div>
</div>
Or use an extra element to hide the overlapping shadows:
body {
background: pink;
}
.b1,
.b2 {
width: 150px;
height: 150px;
background: #fff;
box-shadow: 0 0 13px #000;
position: relative;
}
.b2 {
margin-left: 100px;
}
.b1:before,
.b2:before {
content: "";
position: absolute;
bottom: 0px;
right: 0;
left: 0;
height: 15px;
background: inherit;
z-index: 1;
}
.b2:before {
top: 0;
bottom: initial;
}
<div class="container">
<div class="b1"></div>
<div class="b2"></div>
</div>
You can also build this using only one element:
body {
background: pink;
}
.container {
width:250px;
height:300px;
background:
linear-gradient(#fff,#fff) top left,
linear-gradient(#fff,#fff) bottom right;
background-size:150px 150px;
background-repeat:no-repeat;
filter:drop-shadow(0 0 10px #000);
}
<div class="container">
</div>
I create a new div and set some css for it.
body { background: darkgrey; padding-top: 50px}
div { background: white; width: 200px; height: 200px; box-shadow: 0 0 20px black; margin: auto; position: relative; }
#box-one { left: -50px; }
#box-two { right: -50px; }
#div1{
position:absolute;
background: white;
width:100px;
height:15px;
margin-right:10px;
box-shadow: none;
margin-top:185px;
margin-left:199px;
content: '';
z-index: 1
}
<div id="div1"></div>
<div id="box-one"></div>
<div id="box-two"></div>
A cleaner solution is to add the box-shadow to a pseudo-element like ::before or ::after and then add position:relative to a parent element.
#box-one
{
left: -50px;
}
#box-two
{
right: -50px;
}
body
{
background: darkgrey;
padding-top: 50px;
}
.box-container
{
position: relative;
z-index: 2;
}
.box
{
background: white;
width: 200px;
height: 200px;
margin: auto;
position: relative;
}
.box::after
{
content: "";
box-shadow: 0 0 20px black;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}
<div class="box-container">
<div id="box-one" class="box"></div>
<div id="box-two" class="box"></div>
</div>
I want to create same bottom triangle effect with background but i am not able to get this effect bottom triangle with background image.
enter image description here
i have added the code here but not getting the same effect.bottom arrow im not able to extend as in image.
.logo,.nav,.social-icons{ float:left;}
body{ color:#000; background:#ccc;}
.container{border:1px solid red;}
.clear{ clear:both;}
html,body{margin:0;padding:0;}
/*****************************
BANNER
*****************************/
.section {
height: 680px;
width: 100%;
background: url("http://i.imgur.com/YtluDV9l.jpg") no-repeat left top;
background-size:cover;
}
.bottom-container {
margin-top: -137px;
height: 100px;
width: 100%;
}
.text {
position: relative;
box-sizing: border-box;
height: 300px;
padding-top: 36px;
text-align: center;
line-height: 85px;
background: url("http:////i.imgur.com/uCYtKen.jpg") no-repeat left top;
background-clip: content-box;
overflow: hidden;
margin: 25px 0 0 0;
}
.text:before {
left: 0px;
width: 26%;
transform-origin: left bottom;
transform: skew(-134deg);
}
.text:after, .text:before {
position: absolute;
content: '';
top: 0px;
height: 35px;
background: #fff;
}
.text:after {
right: 2px;
width: 74%;
transform-origin: right bottom;
transform: skew(-226deg);
}
<body>
<!--WRAPPER:STARTS-->
<div id="wrapper">
<!--HEADER:STARTS-->
<!--BANNER:STARTS-->
<section class="section">
</section>
<div class="bottom-container">
<div class="text">Some text</div>
<div class="middle-image"></div>
<div class="right-image"></div>
</div></div>
</body>
html,body{background:url(http://i.imgur.com/ixr4wNC.jpg); height:100%;padding:0;margin:0;overflow:hidden;}
.line {
margin-top: 50px;
height: 5px;
width: 20%;
background: #fff;
position: relative;
box-sizing: border-box;
}
.line:after,
.line:before {
content: "";
position: absolute;
}
.line:after {
left: calc(100% + 2px);
height: 25px;
width: 25px;
top: -12px;
border-top: 5px solid #fff;
border-left: 5px solid #fff;
transform: rotate(225deg);
}
.line:before {
height: 100%;
top: 0;
left: calc(100% + 34px);
width: 400px;
background: inherit;
}
<div class="line"></div>
Is this the same that you are looking for?
Here is JSFiddle
Hope this helps.
This question already has answers here:
CSS: Circle with four colors and only one div
(3 answers)
Closed 7 years ago.
Is it possible to create a circle using only CSS with four quarters in it?
I can't get further than:
.circle {
border-radius: 50%;
width: 40px;
height: 40px;
colour: red;
}
<div class="circle"> </div>
Easily...using borders and a rotation.
.circle {
margin: 1em auto;
border-radius: 50%;
width: 40px;
height: 40px;
box-sizing: border-box;
border-width: 20px;
border-style: solid;
border-color: red green blue yellow;
transform: rotate(45deg);
}
<div class="circle"></div>
You can even have colored hollow circles.
.circle {
border-radius: 50%;
width: 40px;
height: 40px;
box-sizing: border-box;
border-width: 20px;
border-style: solid;
border-color: red green blue yellow;
transform: rotate(45deg);
}
.wide {
width: 100px;
height: 100px;
}
<div class="circle wide"></div>
Or perhaps with pseudo-elements (no rotation needed), just gradients.
*,
*::before,
*::after {
box-sizing: border-box;
}
.circle {
width: 100px;
height: 100px;
margin: 1em auto;
position: relative;
border-radius: 50%;
overflow: hidden;
border: 6px solid pink; /* borders on it too */
}
.circle::before,
.circle::after {
content: '';
position: absolute;
height: 100%;
width: 50%;
top: 0;
}
.circle::before {
left: 0;
background: linear-gradient(green, green 50%, yellow 50%);
}
.circle::after {
left: 50%;
background: linear-gradient(red, red 50%, blue 50%);
}
<div class="circle"></div>
Sure (https://jsfiddle.net/to42ug5y/), you're stuck with just 4 quarters however:
<div id="circle">
<div id="q1" class="quarter"></div>
<div id="q2" class="quarter"></div>
<div id="q3" class="quarter"></div>
<div id="q4" class="quarter"></div>
</div>
CSS:
#circle {
display: block;
padding: 0;
width: 200px;
height: 200px;
border: 1px;
border-radius: 50%;
overflow: hidden;
}
.quarter {
display: inline-block;
float: left;
margin: 0;
padding: 0;
width: 100px;
height: 100px;
}
#q1 {
background-color: #f00;
}
#q2 {
background-color: #0f0;
}
#q3 {
background-color: #00f;
}
#q4 {
background-color: #0ff;
}
This will do it for you https://jsfiddle.net/DIRTY_SMITH/bpxr7858/
HTML
<div id="container">
<div id="part1-wrapper" class="cover">
<div id="part1" class="pie"></div>
</div>
<div id="part2-wrapper" class="cover">
<div id="part2" class="pie"></div>
</div>
<div id="part3-wrapper" class="cover">
<div id="part3" class="pie"></div>
</div>
<div id="part4-wrapper" class="cover">
<div id="part4" class="pie"></div>
</div>
</div>
CSS
#container {
position: relative;
width: 100px;
height: 100px;
}
.cover {
position: absolute;
width: 100%;
height: 100%;
clip: rect(0 100px 100px 50px);
}
.pie {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
clip: rect(0 50px 100px 0px);
}
#part1-wrapper {
transform: rotate(0deg);
}
#part1 {
background-color: red;
transform: rotate(90deg);
}
#part2-wrapper {
transform: rotate(90deg);
}
#part2 {
background-color: green;
transform: rotate(90deg);
}
#part3-wrapper {
transform: rotate(180deg);
}
#part3 {
background-color: yellow;
transform: rotate(90deg);
}
#part4-wrapper {
transform: rotate(270deg);
}
#part4 {
background-color: blue;
transform: rotate(90deg);
}
How would i create a div shape like this? I have read a lot of techniques but i could not figure this one out. Inside the div is text that should not be distorted.
Every technique is welcome it does not have to be pure css.
My HTML structure:
<div class="intro">
<div class="intro-header">
<h1>Headline WOW</h1>
</div>
<div class="intro-text">
<p>Mieleni minun tekevi, aivoni ajattelevi lähteäni laulamahan, saa'ani sanelemasaa'ani sanelema sanelemasaa'ani sanelema </p>
</div>
</div>
you could use some skewed pseudo elements for this:
.first,
.last {
text-align: center;
line-height: 80px;
height: 80px;
background: green;
position: relative;
display: inline-block;
width: 400px;
margin-bottom: 20px;
}
.first:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 50%;
width: 100%;
transform: SkewY(2deg);
transform-origin: bottom left;
background: inherit;
}
.last:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 50%;
width: 100%;
transform: SkewY(2deg);
transform-origin: bottom right;
background: inherit;
}
<div class="first">FIRST LINE</div>
<div class="last">LAST LINE</div>
An alternative (possibly) would be to use a gradient (although this may lead to jagged edges). Solution credit to Harry
body {
background: -webkit-linear-gradient(0deg, crimson, indianred, purple);
}
div {
height: 400px;
width: 400px;
background: -webkit-linear-gradient(75deg, lightseagreen 45%, transparent 45%, transparent 55%, lightseagreen 55%);
}
<div></div>
You can do this with border cut-offs.
As an example:
.top {
height: 300px;
background: red;
position: relative;
width: 300px
}
.top:before {
content: '';
position: absolute;
bottom: 0;
right: 0;
border-bottom: 10px solid white;
border-right: 300px solid red;
width: 0;
}
.bottom {
height: 300px;
background: red;
position: relative;
width: 300px;
padding-top: 10px;
margin-top: 0px;
}
.bottom:before {
content: '';
position: absolute;
top: 0;
right: 0;
border-top: 10px solid white;
border-left: 300px solid red;
width: 0;
}
<div class="top">Text</div>
<div class="bottom">Text</div>
This should do it.
html,body{
margin:0;
height:100%;
}
.intro{
width:400px;
display:inline-block;
background:red;
padding:50px;
}
.intro-header,.intro-text{
width:100%;
display:inline-block;
background:#ccc;
text-align:center;
position:relative;
}
.intro-header{
margin-bottom:50px;
}
.intro-header:after{
position:absolute;
left:0;
content:"";
width: 0;
height: 0;
border-left: 400px solid transparent;
border-top: 20px solid #ccc;
}
.intro-text:after{
position:absolute;
top:-20px;
left:0;
content:"";
width: 0;
height: 0;
border-right: 400px solid transparent;
border-bottom: 20px solid #ccc;
}
Example: CodePen