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;
}
Related
This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 1 year ago.
I wanted to experiment with ::after, so I made three figures (square, circle and triangle) then put their respective after, and works fine with the circle and square however with the triangle makes a gap and I don't understand why, I tried changing the positions and displays attributes but it didn't work
.maincontainer {
background-color: whitesmoke;
border-radius: 1rem;
width: 95%;
min-height: 200px;
margin: 0 auto;
display: flex;
}
.maincontainer div {
margin: 10px;
background-color: teal;
}
.cuadrado {
width: 100px;
height: 100px;
}
.circulo {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: yellowgreen !important;
}
.triangulo {
width: 0px;
border-bottom: 100px solid yellow;
border-left: 50px solid transparent;
background-color: transparent !important;
border-right: 50px solid transparent;
}
.triangulo::after {
content: "Triangulo";
position: fixed;
top: 120px;
left: 28.5%;
}
.cuadrado::after {
content: "Cuadrado";
position: fixed;
top: 120px;
left: 65px;
}
.circulo::after {
content: "circulo";
position: fixed;
top: 120px;
left: 195px;
}
<div class="maincontainer">
<div class="cuadrado"></div>
<div class="circulo"></div>
<div class="triangulo"></div>
</div>
You can remove the gap by setting the height to 0px
note: I also set left: 48% just to make the triangulo word in the center
.maincontainer {
background-color: whitesmoke;
border-radius: 1rem;
width: 95%;
min-height: 200px;
margin: 0 auto;
display: flex;
}
.maincontainer div {
margin: 10px;
background-color: teal;
}
.cuadrado {
width: 100px;
height: 100px;
}
.circulo {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: yellowgreen !important;
}
.triangulo {
width: 0px;
height: 0px; /* << here */
border-bottom: 100px solid yellow;
border-left: 50px solid transparent;
background-color: transparent !important;
border-right: 50px solid transparent;
}
.triangulo::after {
content: "Triangulo";
position: fixed;
top: 120px;
left: 48%;
}
.cuadrado::after {
content: "Cuadrado";
position: fixed;
top: 120px;
left: 65px;
}
.circulo::after {
content: "circulo";
position: fixed;
top: 120px;
left: 195px;
}
<div class="maincontainer">
<div class="cuadrado"></div>
<div class="circulo"></div>
<div class="triangulo"></div>
</div>
This question already has answers here:
one sided skew with css
(2 answers)
Closed 4 years ago.
I am trying to make a div element to look like this:
So how can I apply the skew transform property so that only one side(the bottom one here) gets tilted?
Try this code
a {
color: white;
}
.title {
position: relative;
width: 120px;
padding: 45px 20px 10px 10px;
font-size: 20px;
position: relative;
color: #FFF;
background: Grey;
}
.title:after {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 230%;
top: 0;
left: 0;
z-index: -1;
background: Grey;
transform-origin: bottom right;
transform: skew(0deg,-20deg);
}
<div class="title">
</div>
You can a triangle using the border trick on a ::before pseudo element.
div {
position: relative;
padding: 30px;
background-color: gray;
width: 30px;
}
div::before {
position: absolute;
content: '';
bottom: -120px;
right: 0;
width: 0;
height: 0;
border-top: 60px solid gray;
border-bottom: 60px solid transparent;
border-right: 90px solid transparent;
}
<div>Hello world</div>
Is it possible to make this shape in CSS3?
You can do something like this, using a pseudo selector of after.
CODEPEN LINK
CSS
div {
height: 200px;
background: blue;
position: relative;
width: 400px;
}
div:after {
content: '';
position: absolute;
top: -50px;
left: -200px;
border-top: 300px solid white;
border-left: 300px solid white;
width: 0;
background: #fff;
border-radius: 300px;
}
This question already has answers here:
Invert rounded corner in CSS?
(10 answers)
CSS shape with inset curve and transparent background
(2 answers)
Closed 6 years ago.
How i can make this shape with keeping the inside rounded area transparent?
Here example for what i want to implement: http://codepen.io/moradxd/pen/EgVVdg
body {
background: #16c5de;
}
.shape-box {
width: 80px;
height: 80px;
position: relative;
margin: 100px auto;
}
.element-1,
.element-2 {
display: block;
position: relative;
}
.element-1 {
width: 80px;
height: 40px;
background: #fff;
position: absolute;
bottom: 0;
z-index: 0;
}
.element-2 {
width: 80px;
height: 80px;
background: #16c5de;
z-index: 1;
border-radius: 100%;
}
<div class="shape-box">
<span class="element-1"></span>
<span class="element-2"></span>
</div><!-- .shape-box -->
You can try :before or :after pseudo element and box-shadow as shown below.
body {
background: #007aff;
padding: 40px;
margin: 0;
}
.box {
position: relative;
overflow: hidden;
height: 100px;
width: 100px;
}
.box:before {
box-shadow: 0 0 0 100px #fff;
position: absolute;
border-radius: 100%;
margin-left: -60px;
height: 200px;
content: '';
width: 120px;
left: 50%;
bottom: 0;
}
<div class="box"></div>
Here is how I want it to look:
I realize this is an ugly mockup and obviously when I do it for real the proportions will look better, but I am wondering how you would go about doing this with CSS.
fiddle is here http://jsfiddle.net/bU3QS/1/
<div class="header">
</div>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #000;
z-index: 10000;
height: 110px;
overflow: hidden;
}
Use the :after pseudo element:
.header:after {
content: '';
position: absolute;
background: black;
width: 50px;
height: 50px;
z-index: 1;
border-radius: 50%; /* Makes the element circular */
bottom: -25px;
left: 50%;
margin-left: -25px;
}
For this solution, overflow: hidden; has been removed from the .header CSS.
Here's a fiddle: http://jsfiddle.net/t97AX/
Here's another approach, that doesn't rely on the width of the semicircle to center it properly:
.header:after {
content: '';
position: relative;
top: 100%;
display: block;
margin: 0 auto;
background: red;
width: 50px;
height: 25px;
border-radius: 0 0 50px 50px;
}
The fiddle (semicircle red for the sake of clarity): http://jsfiddle.net/x4mdC/
More on :before and :after: http://www.w3.org/TR/CSS2/selector.html#before-and-after
Use :after and border-radius to create the semicircle.
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #000;
height: 110px;
}
.header:after {
content: '';
background-color: red;
position: absolute;
display: block;
width: 100px;
top: 110px;
left: 50%;
margin-left: -50px;
height: 50px;
border-radius: 0 0 50px 50px;
}
Demo: http://jsfiddle.net/bU3QS/2/
<div class="header">
<div class="circle">
</div>
</div>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #000;
height: 110px;
}
.circle {
height: 100px;
width: 100px;
border-radius: 100px;
background-color: black;
margin: auto;
position: relative;
top:45px;
}
in action: http://jsfiddle.net/NickWilde/ngcce/