Is it possible to create an a curved element like this with border radius ruler if so what is it?
.box {
width: 500px;
height: 100px;
border: solid 0 #000;
border-color: #000 transparent transparent transparent;
border-radius: 100%/0 100px 0 0px;
background-color: #FF7C07;
}
<div class="box"></div>
i tried doing it with this code but i cant seem to make it work.
You can use a radial-gradient as background for this:
.box {
width: 500px;
height: 200px;
background: radial-gradient(110% 50% at top right,#0000 99%,#FF7C07);
}
<div class="box"></div>
This was the closest I could get to your curved element. Sadly, there is no direct way of doing this using only border radius.
.box {
width: 500px;
height: 100px;
border: solid 0 #000;
border-color: #000 transparent transparent transparent;
background-color: #FF7C07;
}
.top-right {
margin-top: -125px;
margin-left: -35px;
width: 535px;
height: 80px;
border-bottom-left-radius: 100%;
background-color: #FFFFFF;
}
<div class="box"></div>
<div class="top-right"></div>
I would recommend the following method instead:
.box {
height: 200px;
overflow:hidden;
background-color: #FF7C07;
position:relative;
z-index:10;
}
.box:before {
content: "";
position: absolute;
left: -25%;
right: -125%;
top: -200%;
bottom: 30%;
background-color: #FFF;
border-radius: 100%;
z-index: -1;
}
<div class="box">123</div>
Related
I'd like to draw some kind of triangle in the corner of a div. Because I don't want to use "px" I'd like to achieve the same result also with percentage values.
This is what it should looks like:
.container {
position: absolute;
top: 5%;
left: 5%;
width: 60%;
height: 30%;
background: black;
color: white;
border-radius: 12px;
overflow: hidden;
}
.triangle {
position: relative;
top: 10%;
left: 90%;
width: 10%;
height: 10%;
-webkit-transform: rotate(45deg);
background: green;
}
<div class="container">
<div class="triangle"></div>
</div>
Any help would be very appreciated. Thanks in advance!!
You can use position: absolute on triangle element and set top and right properties to 0.
.container {
position: absolute;
top: 5%;
left: 5%;
width: 60%;
height: 30%;
background: black;
color: white;
border-radius: 12px;
overflow: hidden;
}
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 30px 30px 0;
border-color: transparent #608A32 transparent transparent;
right: 0;
top: 0;
position: absolute;
}
<div class="container">
<div class="triangle"></div>
</div>
You can also just use pseudo-element with absolute position for triangle.
.container {
position: relative;
width: 300px;
height: 70px;
background: black;
border-radius: 12px;
overflow: hidden;
}
.container:after {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 0 30px 30px 0;
border-color: transparent #608A32 transparent transparent;
right: 0;
top: 0;
position: absolute;
}
<div class="container"></div>
Below is another example with triangles in all corners.
.all_triangles_container {
position: relative;
width: 300px;
height: 70px;
background: black;
overflow: hidden;
}
.triangle {
width: 0;
height: 0;
border-style: solid;
position: absolute;
}
.triangle_tl {
border-width: 0 0 30px 30px;
border-color: transparent transparent transparent green;
left: 0;
top: 0;
}
.triangle_tr {
border-width: 0 30px 30px 0;
border-color: transparent red transparent transparent;
right: 0;
top: 0;
}
.triangle_br {
border-width: 30px 30px 0 0;
border-color: transparent yellow transparent transparent;
right: 0;
bottom: 0;
}
.triangle_bl {
border-width: 0 30px 30px 0px;
border-color: transparent transparent purple transparent;
left: 0;
bottom: 0;
}
<div class="all_triangles_container">
<div class="triangle triangle_tl"></div>
<div class="triangle triangle_tr"></div>
<div class="triangle triangle_br"></div>
<div class="triangle triangle_bl"></div>
</div>
You can simply rely on background and create the triangle with a linear-gradient without extra markup and pseudo-element:
.container {
width: 400px;
height: 100px;
background: linear-gradient(-135deg,#608A32 35px,#000 0);
color: white;
border-radius: 12px;
overflow: hidden;
}
<div class="container"></div>
Related: https://stackoverflow.com/a/49696143/8620333
The trick is make a square with position:absolute first and then use top and right position negative values(equal to the half of width of the element) to adjust it and then rotate it using transform
Stack Snippet
.container {
position: absolute;
top: 5%;
left: 5%;
width: 60%;
height: 30%;
background: black;
color: white;
border-radius: 12px;
overflow: hidden;
}
.triangle {
position: absolute;
top: -25px;
right: -25px;
width: 50px;
height: 50px;
transform: rotate(45deg);
background: green;
}
<div class="container">
<div class="triangle"></div>
</div>
Another way to use gradients backgrounds
Stack Snippet
.container {
position: absolute;
top: 5%;
left: 5%;
width: 60%;
height: 30%;
background-image: linear-gradient(45deg, black 92%, green 92%);
color: white;
border-radius: 12px;
}
<div class="container"></div>
Of course you can also have striped background similar to textbox resizers
.button {
position: relative;
width: 150px;
height: 35px;
background: black;
border-radius: 8px;
overflow: hidden;
}
.blue { background: #09f; }
.red { background: #f00; }
.orange { background: #f90; }
.green { background: #0c0; }
.button:after {
content: '';
width: 45px;
height: 14px;
background: repeating-linear-gradient(
0deg,
rgba(255,255,255,.7),
rgba(255,255,255,.7) 2px,
transparent 2px,
transparent 4px
);
border-style: 0px solid;
right: -15px;
bottom: -4px;
position: absolute;
transform: rotate(-45deg);
}
<div class="button"></div>
<div class="button blue"></div>
<div class="button red"></div>
<div class="button orange"></div>
<div class="button green"></div>
If overflow: hidden on the container is not an option you can use the pseudo element's bottom border:
.container:after {
content: '';
position: absolute;
width: 0;
height: 0;
margin: -16px;
border: 10px solid transparent;
border-bottom-color: red;
transform: rotate(-45deg);
}
Adjust margin and border values for your case.
I want to build the following layout:
Preferable i want only use css for that. But even with an background-image i wouldn't know how to build it. I searched the web, but didn't find the help i needed.
The Layout contains a div with some text in it. The background-color is a light gray. Then i would love to add a darker triangle background as shown in the picture. This should work as a responsive layout, too.
What i tried:
# html
<div class="wrapper">
<h1>Das ist ein test</h1>
<h2>subheadline</h2>
</div>
#css
.wrapper {
padding-top: 100px;
text-align: center;
width: 100%;
background-color: #4d4d4d;
height: 400px;
color: #fff;
position: relative;
}
.wrapper:before{
height: 50%;
width:100%;
position:relative;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
content:'';
display:block;
position:absolute;
top: 0;
background-color: #3d3d3d;
}
But this does not work and i can't figure it out on my own.
Thank you for your help!
You can set 2 light gradients on top of the darker background.
They overlap each other and leave only the remaining triangle darker
div {
width: 400px;
height: 200px;
border: solid 1px green;
background: linear-gradient(to top left, lightgreen 50%, transparent 50%),
linear-gradient(to top right, lightgreen 50%, transparent 50%), green;
}
<div></div>
Try this one, but still need some work on the responsive part.
.box{
position: relative;
width: 100%;
max-width: 600px;
background: #ccc;
min-height: 300px;
}
.box:before {
width: 0;
height: 0;
content: "";
position: absolute;
z-index: 0;
top: 0;
left: 0;
border-left: 300px solid transparent;
border-right: 300px solid transparent;
border-top: 180px solid #555;
}
.box .content{
z-index: 10;
position: relative;
color: #fff;
text-align: center;
padding-top: 40px;
}
h1, h2{
margin: 0;
padding: 0;
}
h2{
margin-bottom: 80px;
}
.btn{
background: #f00;
color: #fff;
display: inline-block;
padding: 5px 10px;
text-align: center;
text-decoration: none;
min-width: 200px;
font-size: 20px;
}
<div class="box">
<div class="content">
<h1>Headline</h1>
<h2>Headline</h2>
CTA
</div><!--// end .content -->
</div><!--// end .box -->
This should get you close, and illustrates a CSS only approach:
* {
margin: 0;
padding: 0
}
body {
background: #ccc;
min-height: 500px;
}
div {
width: 0;
height: 0;
margin: 0px auto;
border: 200px solid transparent;
border-top-color: grey;
}
a {
display: block;
background: blue;
color: white;
padding: 5px 10px;
width: 200px;
margin: 0px auto;
position: relative;
top: -200px;
text-align: center;
text-decoration: none;
}
<div></div>
link
This question already has answers here:
Inset border-radius with CSS3
(8 answers)
Closed 6 years ago.
Please help me out i want to make a div like this
Method # 01:
Use raidal-gradient:
body {
background: #f0f0f0;
margin: 0;
}
.box {
background: radial-gradient(circle at bottom right, transparent 60px, #000 60px);
height: 150px;
width: 250px;
}
<div class="box"></div>
Method # 02:
You can create it with combination of :before or :after pseudo element and box-shadow css property.
body {
background: #f0f0f0;
margin: 0;
}
.box {
position: relative;
overflow: hidden;
height: 150px;
width: 250px;
}
.box:before {
box-shadow: 0 0 0 1000px #000;
border-radius: 100%;
position: absolute;
bottom: -30px;
height: 100px;
right: -35px;
width: 100px;
z-index: -1;
content: '';
}
<div class="box"></div>
The easiest method will be using a pseudo element. By absolutely positioning the :after element, you can get the desired effect.
.box {
background: #000;
width: 300px;
height: 150px;
position: relative;
}
.box:after {
content: '';
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
background: #fff;
right: -75px;
bottom: -75px;
}
<div class="box"></div>
Try this CSS,
.rec{
height: 200px;
background: black;
position: relative;
width:600px;
}
.rec:after {
content: '';
position: absolute;
bottom: -20px; right: -20px;
border-bottom: 100px solid white;
border-left: 100px solid white;
width: 0;
background:#fff;
border-radius:150px;
}
So i wanted to create a responsive trapezoid where you can apply a border and a background colour to it
I already created one using 3 div blocks but i cant get the border at the top of the trapezoid to stay inline when the width and height is changed
So my question is either.
can someone help me figure out how to keep the line at the top of the trapezoid in line with the left and right border
or if anybody knows of a different solution?
Here is my code....
.trapezoid-container{
position: relative;
margin-left: 100px;
width: 200px;
height: 200px;
}
.trapezoid {
background: green;
position: relative;
position:absolute;
content:"";
width: 70%;
height: 100%;
border-top: 5px solid black;
border-bottom: 5px solid black;
left: 20px;
}
.trapezoid:before {
background: green;
position:absolute;
content:"";
width: 60%;
height: 100%;
left: 63%;
border-right: 5px solid black;
border-bottom: 5px solid black;
transform: skew(20deg);
}
.trapezoid:after {
background: green;
position:absolute;
content:"";
width: 60%;
height: 100%;
left: -28%;
border-left: 5px solid black;
border-bottom: 5px solid black;
transform: skew(-20deg);
}
<div class="trapezoid-container">
<div class="trapezoid">
</div>
</div>
Thanks guys :)
A better solution found on How to draw a trapezium/trapezoid with css3? Which answers my question, thought id post it
#container {
position: relative;
margin-left: 200px;
width: 200px;
height: 200px;
}
.trapezoid {
position: relative;
width: 30%;
height: 50%;
background: red;
transform: perspective(2px) rotateX(1deg);
border: solid 4px black;
left: 20%;
top: 70%;
}
<div id="container">
<div class="trapezoid">
</div></div>
Right, I ran into a bit of a problem and not to sure if this can be solved another way.
I need to move the content: "F"; and center it onto the border I have in the top left corner. Now is this possible without creating another element?
HTML:
<div class="userBoxF"></div>
CSS:
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF:after {
content: "F";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
font-size: 30px;
}
The only way I can think to do it is to create the corner as a completely separate element so I can put the text "F" into a span (or something) and move it that way.
Demo Here
Note: Nothing here will change size, width and height for both the box and corner will always be the same.
Here is what I want, using the solution i found but would rather not use.
HTML:
<div class="userBoxF">
<div class="corner"><span>F</span></div>
</div>
CSS:
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF .corner {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
font-size: 30px;
}
.userBoxF .corner span {
display: block;
position: absolute;
top: -30px;
left: -20px;
}
Here is a demo of the solution I came up with but I would rather not create anymore elements.
My Solution
You can use :before wit :after together.
I removed the span:
<div class="userBoxF">
</div>
And changed the CSS blocks to this:
.userBoxF:before {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
content: "";
}
.userBoxF:after {
display: block;
position: absolute;
top: 10px;
left: 14px;
content: "F";
font-size: 30px;
}
And here's the updated fiddle
EDIT: Here's an added bonus!
You can jack the "F" from the class, if you want it to be more versatile, if you use CSS's attr inside content. Example:
<div class="userBox" data-l="F">
</div>
And:
.userBox:after {
display: block;
position: absolute;
top: 10px;
left: 14px;
content: "" attr(data-l);
font-size: 30px;
}
And another fiddle
Arguably the "F" is actual content as it's not a styling option...it actually denotes something and, perhaps should be read by a screenreader (for instance) then a span with a gradient (TL - BR) mightbe more appropriate.
JSFiddle Demo
HTML
<div class="userBoxF">
<span class="section-letter">F</span>
</div>
CSS
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.section-letter {
position: absolute;
top: 0;
left: 0;
width:2em;
height:2em;
line-height: 1em;
text-align: left;
padding:0.25em 0 0 0.25em;
font-size: 30px;
background: linear-gradient(135deg, pink 0%, pink 50%, transparent 50%, transparent 100%);
}
Simply use another :psuedo:
Demo Fiddle
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF:before,.userBoxF:after{
position: absolute;
top: 0;
left: 0;
}
.userBoxF:before {
content:"";
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
}
.userBoxF:after {
content:attr(data-l);
top: 10px;
left: 10px;
font-size: 30px;
}
From a single pseudo, you can use a gradient as background : DEMO
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF:after {
content:"F";
position: absolute;
top: 0;
left: 0;
text-indent:20px;
line-height:60px;
width:80px;
height:80px;
background:linear-gradient(to bottom right, #F385FF 51%, transparent 49%);
font-size: 30px;
}
background-image as gradient can be just an image like in old days :
DEMO: