I am trying to get two triangles to make a rectangle. I then want to put content into each triangle. I am following a previous question's answer from here: Previous Question.
My issue is that I cannot get the rectangle to be width: 80vw without the height being massive. Then, I am not sure how I can put content into an after element or if this is even the best way to design this knowing that I will be putting content into the triangles.
Does anyone know how I can do this or have any better solutions?
#tierBoxSec {
position: relative;
height: auto;
width: 100%;
}
.box {
width: 80vw;
height: 200px;
background: radial-gradient(at top left, #FFF 49%, #b82222 50%, #b82222 100%);
}
<section id="tierBoxSec">
<div class="box"></div>
</section>
I've made a snippet better illustrating how to do this with linear gradients:
red 50%, blue 50% is setting a "color stop" of 50% for each color, meaning they won't continue past 50% of the gradient area. You could create different demarcation lines by doing something like red 25%, blue 25%, for example.
#box {
width: 100px;
height: 100px;
background: linear-gradient(45deg, red 50%, blue 50%);
}
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient -->
<body>
<div id="box">
</div>
</body>
Here is an improvement for the linear-gradient solution to have a responsive block:
.box {
width: 80vw;
height: 80vh;
background: linear-gradient(to top right, red 49.9%, blue 50.1%);
}
<div class="box"></div>
Here is a solution using borders and box-sizing:
#box {
height: 8vh;
width: 80vh;
box-sizing: border-box;
background: red;
border-style: solid;
border-width: 8vh 80vh;
border-color: blue red red blue;
}
<div id="box"></div>
⋅
⋅
⋅
If you really want two distincts triangles, here is a "forked" solution of the above, using the ::after pseudo-element :
#box {
position: relative;
height: 8vh;
width: 80vh;
box-sizing: border-box;
border: solid transparent;
border-width: 8vh 80vh;
border-top-color: blue;
border-right-color: blue;
}
#box::after {
position: absolute;
content: '';
border: solid transparent;
border-width: 8vh 80vh;
border-bottom-color: red;
border-left-color: red;
transform: translate(-50%, -40%); /* Change -40% to -50% if you want the two triangle to stick */
}
<div id="box"></div>
<br>
(I've let a space just to show you)
Hope it helps.
Related
I tried to make a hole area in the bottom corner of the overlay like in the image below, but still having trouble.
here is an example of the code
<div className="container h-screen bg-overlay fixed z-50 opacity-90 holes">
</div>
.holes::before {
content: "";
display: block;
/* Scale */
width: 50px;
padding: 10px 0px;
/* Position */
position: absolute;
top: 90%;
right: 60%;
z-index: 2;
/* Border */
border: solid 80px rgb(255,255,255);
border-radius: 50%;
opacity: 0.7;
}
but the code above still doesn't fit because it doesn't make a hole in the lower left corner but makes a new hole with a pseudo class
It can be achieved using pseudo classes. Just an after or before can be used if you are not expecting it to emit any events.
Do you require a complete circle or a half one?
.container {
width: 100%;
height: 300px;
position: relative;
background-color: blue;
}
.round {
position: absolute;
display: inline-flex;
justify-content: center;
align-items: center;
content: '';
width: 100px;
height: 100px;
border-radius: 50%;
border: 5px solid yellow;
background-color: #fff;
bottom: -50px;
left: 50px;
color: #777;
font-size: 16px;
}
<div class='container'>
<span class='round'>UPLOAD</span>
</div>
EDIT
Added text inside the round
You can use CSS mask to cut a hole in an element with a radial-gradient as the mask image. You can put the yellow border around the hole with a background radial gradient at the same place.
This snippet has a container background of magenta so you can see that a genuine 'hole' is cut with whatever is below being shown (though the background radial gradient will cover it with a transparent layer).
Note: view the snippet in Full page
.container {
background-color: magenta;
display: inline-block;
width: 100vw;
height: 100vh;
}
.div {
-webkit-mask: radial-gradient(circle at 50px 100%, transparent 0, transparent 50px, black 50px, black 100%);
mask: radial-gradient(circle at 50px 100%, transparent 0, transparent 50px, black 50px, black 100%);
background-color: skyblue;
background-image: radial-gradient(circle at 50px 100%, transparent 0, transparent 50px, yellow 50px, yellow 53px, transparent 53px, transparent 100%);
width: 100%;
height: 300px;
margin: 0;
padding: 0;
}
<div class="container">
<div class="div"></div>
</div>
I've seen a million tutorials on how to make a slanted edge like in this article for example.
but I cannot seem to find any information on how I would be able to create a div that looks like this...
a double slanted edge that comes to a point.. now I experimented a bit with using an svg image at the bottom of the div but it just wouldnt work properly.. any idea how I can recreate this??
I've seen something similar which required the user of a clip-path, but I need to support IE etc..
any help would be appreciated!
Thanks
I did a feeble attempt to recreate the same div with a double-slanted edge using before and after pseudo elements. You just have to tweak the rotation, top and left values to match your design.
div {
width: 400px;
height: 400px;
border: 1px solid black;
position: relative;
overflow: hidden;
}
div:after{
content: '';
position: absolute;
width: 100%;
background: green;
height:100%;
left: 50%;
top: 50%;
transform: rotate(75deg);
}
div:before{
content: '';
position: absolute;
width: 100%;
background: green;
height:100%;
right: 50%;
top: 50%;
transform: rotate(-75deg);
}
<div></div>
I'm not sure if this is the design that you are wanting.
This is accomplishable with just the border property of a second div, which would help with compatibility of older browsers (if you need to support older versions of IE which don't support pseudo-elements, or even current versions, which don't support use of em units on pseudo-elements)
The CSS
div {
width: 100%;
min-height: 100px;
}
#chevron {
padding-bottom: 100px;
}
#second {
width: 0px;
margin-top: -100px;
border-top: 50px solid transparent;
border-right: 50vw solid blue;
border-left: 50vw solid blue;
border-bottom: 50px solid blue;
}
The HTML
<div id='chevron'></div>
<div id='second'></div>
See this CodePen for a result.
You might use linear-gradients:
body {
background:
linear-gradient(10deg, transparent 45%, #fff 45%) 0 0 / 50vw 50vh,
linear-gradient(-10deg, transparent 45%, #fff 45%) 100% 0 / 50vw 50vh,
linear-gradient(180deg, #cde, #eee 70%) 0 0 / 100vw 100vh;
background-repeat:no-repeat;
}
I want a div that has an "angle like shape on the left". How can I create this with CSS3 only? I am assuming this requires 2 divs? I know I can make a rectangle div and fill it back, and have yellow text. Though I don't know what I can do to make the triange shape on the left. Can it be done with done div only? Or does it need 2? Looking for the best way to do this.
You can achieve this using linear-gradient. Demo:
.text {
width: 400px;
background-image: linear-gradient(45deg, transparent 50px, black 50px);
padding-left: 100px;
color: yellow;
}
<div class="text">
<h1>Some Name Here</h1>
</div>
Why not try something like this:
.triangle {
width: 0;
height: 0;
border: 50px solid black;
border-bottom-color: transparent;
border-left-color: transparent;
float: left;
}
.text {
width: 400px;
height: 100px;
background-color: black;
float: left;
color: yellow;
}
<div class="triangle"></div>
<div class="text"><h1>Some Name Here</h1></div>
See How do CSS triangles work? for more info on this.
You can use of Pseudo Elements ::before or ::after
.triangle {
padding: 10px;
position: relative;
background-color: #000;
color: yellow;
display: inline-block;
margin-left: 40px;
}
.triangle::after {
content: "";
position: absolute;
border: 19px solid #000;
height: 0;
width: 0;
left: -38px;
top: 0;
bottom: 0;
margin: auto;
border-left-color: transparent;
border-bottom-color: transparent;
}
<div class="triangle">
text-here
</div>
Link for reference
Style Accordingly.
You can use clip-path but it has not so good browser support. I'm using 100vmax 100vmax here to achieve 45 degrees clipping. Demo:
.text {
width: 400px;
background-color: black;
-webkit-clip-path: polygon(100vmax 100vmax, 0% 0%, 100% 0%, 100% 100%);
clip-path: polygon(100vmax 100vmax, 0% 0%, 100% 0%, 100% 100%);
padding-left: 100px;
color: yellow;
}
<div class="text">
<h1>Some Name Here</h1>
</div>
For a website I'm developing I need to include some diagonal shaped borders to a div. These are the main examples which I need to recreate.
double diagonal top border, triangle shaped
Now been scouting the web on how to achieve this, and my first thought as well would be by using ::before. However I can't get it to work without it being positioned absolute which messes up the entire page.
This is my code I have tried to achieve something like this:
.slider-container{
background-color: $blue;
width: 100%;
overflow: hidden;
position: relative;
.col-md-3{
img{
padding: 40px;
width: 100%;
max-width: 400px;
margin: auto;
}
}
&::before {
background: red;
bottom: 100%;
content: '';
display: block;
height: 100%;
position: absolute;
right: 0;
transform-origin: 100% 100%;
transform: rotate(-15deg);
width: 150%;
}
}
<section id="slider">
<div class="container-fluid">
<div class="row slider-container">
<div class="col-md-3">
<p>imgae 1</p>
</div>
<div class="col-md-3">
<p>imgae 2</p>
</div>
<div class="col-md-3">
<p>imgae 3</p>
</div>
<div class="col-md-3">
<p>imgae 4</p>
</div>
</div>
</div>
</section>
Note: it won't work in here but this is the result I get result
With just css and a bit tweaking based on your divs size you could create something like this:
.myclass {
width: 100px;
height: 100px;
background: linear-gradient(45deg, black 0%, black 26%, transparent 26%), linear-gradient(-45deg, black 0%, black 27%, transparent 27%)
}
.myclass2 {
width: 100px;
height: 100px;
background: linear-gradient(-45deg, blue 0%, blue 27%, transparent 27%), linear-gradient(45deg, blue 0%, blue 26%, red 26%)
}
With transparency:
<div class="myclass">My content here</div>
<br/>
Not as easy with transparent:
<div class="myclass2">My content here</div>
Edit: Just tested this in chrome, you might need special linear-gradients for older/other browsers.
The most simple way to achieve this would probably be to use a background image, though the effect may prove to be inconsistent on smaller devices. For this reason, you may want to consider using a hard-stop gradient.
.grad {
background: lightblue; /* For browsers that don't support gradients */
background: -webkit-linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
background: -o-linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
background: -moz-linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
background: linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
width: 100%;
padding: 20px;
}
<div class="grad">
<h1>Hard-stop gradient</h1>
<p>Using this type of gradient, you can create an angled background without using a background image.</p>
</div>
Using this, you can create a gradient from 0% to 15% that is white on both ends, followed by a gradient from 15% to 100% that's fully black. This completely removes the fading effect, giving you your angled background. It's probably the most efficient way as well since it only requires one line of CSS.
Something like this?
div {
background: yellow;
height: 150px;
overflow: hidden;
position: relative;
width: 300px;
}
div::before {
background: red;
bottom: 100%;
content: '';
display: block;
height: 100%;
position: absolute;
right: 0;
transform-origin: 100% 100%;
transform: rotate(-15deg);
width: 150%;
}
<div></div>
You can use clip-path.
body {
margin: 0;
padding: 0;
color: #ffffff;
}
.wrapper {
min-height: 100vh;
min-width: 100vw;
max-width: 100vw;
width: 100vw;
background-color: red;
}
.bg {
min-height: 100vh;
min-width: 100vw;
background-color: blue;
clip-path: polygon(80% 0, 100% 0, 100% 100%, 50% 100%);
}
<div class="wrapper">
<div class="bg"></div>
</div>
For me, the linear-gradient is not smooth ...
I would suggest either clip-path or svg:
svg {
display: block;
width: 100%;
height: 55px;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
<polygon points="100 0 100 10 0 10" fill="white" />
</svg>
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid green;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
This question already has answers here:
turning a div into transparent to see through two containers
(4 answers)
Closed 6 years ago.
Is there any way to have a div with a background-color that takes up 100% width and a transparent box inside it that shows the original background?
Solution 1: Clip-path
Clip path can be quite useful, as it keeps the code clean and simple. However, it does not have great support (yet) in browsers, and should hence only be used in test environments.
html {
background: url("http://butlers-web.co.uk/Content/Images/BWLOGO.png") 100% 100%;
}
div {
height: 300px;
width: 100%;
background: tomato;
position: relative;
-webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0, 50% 0, 50% 20%, 80% 20%, 80% 80%, 20% 80%, 20% 20%, 50% 20%, 50% 0);
}
<div>
</div>
Solution 2: Box shadow Trick
The box shadow trick uses a pseudo element and overflow:hidden; to create the box shadow/colouring of the element.
html {
background: url("http://butlers-web.co.uk/Content/Images/BWLOGO.png") 100% 100%;
}
div {
height: 300px;
width: 100%;
overflow:hidden;
position: relative;
}
div:before{
content:"";
position:absolute;
top:20%;width:60%;height:60%;left:20%;
box-shadow:0 0 0 999px tomato;
}
<div></div>
Solution 3: Gradients
You could use multiple gradient background, however this may or may not be suitable as gradients don't always turn out rendered very nicely:
html {
background: url("http://butlers-web.co.uk/Content/Images/BWLOGO.png") 100% 100%;
}
div {
position: relative;
height: 300px;
width: 100%;
background: linear-gradient(tomato, tomato), linear-gradient(tomato, tomato), linear-gradient(tomato, tomato), linear-gradient(tomato, tomato);
background-size: 100% 20%, 20% 100%, 100% 20%, 20% 100%;
background-position: left bottom, right bottom, left top, left top;
background-repeat: no-repeat;
}
<div></div>
Solution 4: Borders
Whilst this may or may not be suitable for you, there is still a chance that it may help, so will post here anyway:
html {
background: url("http://butlers-web.co.uk/Content/Images/BWLOGO.png") 100% 100%;
}
div {
position: relative;
height: 300px;
width: 100%;
box-sizing: border-box;
border-left: 20vw solid tomato;
border-right: 20vw solid tomato;
border-top: 50px solid tomato;
border-bottom: 50px solid tomato;
}
<div></div>
Solution 5: Background attachment
I have recently come across the background-attachment property, so am still coming to grips with it. However, if you wished the background to appear behind you may be able to alter the below snippet to your needs:
body {
background: url('http://butlers-web.co.uk/Content/Images/BWLOGO.png');
background-attachment: fixed;
}
.wrapper {
width: 100%;
height: 300px;
background: tomato;
position: relative;
}
.inner {
width: 80%;
height: 80%;
background: url('http://butlers-web.co.uk/Content/Images/BWLOGO.png');
background-attachment: fixed;
position: absolute;
top: 10%;
left: 10%;
box-sizing:border-box;
border:2px solid black;
}
<div class="wrapper">
<div class="inner"></div>
</div>
You're going to need two div for that. A parent, with the red background, then the inner div.
give the inner div margin: 10px auto; as a start.