I've created cut div from both let and right side with css and I want to set that half div on the image. But due to border-color:white the cut part is not coming transparent. I've tried to give the border-color:transparent but it does not work, instead it removes the cut portion... What should be the problem to make it transparent?
Here is my code:
.goldenstrip::after {
content: '';
position: absolute;
top: 0;
left: 0;
border-bottom: 106px solid white;
border-right: 40px solid #c1b07a;
width: 0;
bottom: 0;
}
.goldenstrip::before {
content: '';
position: absolute;
top: 0;
right: 0;
border-top: 106px solid white;
border-left: 40px solid #c1b07a;
width: 0;
bottom: 0;
}
.goldenstrip {
text-align: center !important;
display: block;
text-transform: uppercase;
background: #C1B07A;
color: white;
font-size: 24px;
margin: 0 auto;
padding: 38px 0px;
position: relative;
font-family: "Roboto Medium";z-index: 1;
top: 52px;
width: 90%;
}
.seminar_image img {
width: 100%;
}
<span class="goldenstrip">Hello world</span>
<div class="seminar_image"><img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" alt="" class=""></div>
Please use this css instead of your after and before css.
goldenstrip::after {
content: '';
position: absolute;
top: 0;
left: -22px;
width: 45px;
bottom: 0;
transform: skew(23deg);
background: #c1b07a;
}
.goldenstrip::before {
content: '';
position: absolute;
top: 0;
right: -22px;
width: 50px;
bottom: 0;
background: #c1b07a;
transform: skew(23deg);
}
Use transform property for a slanted edge div.
.goldenstrip::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #c1b07a;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skew(20deg);
-ms-transform: skew(20deg);
transform: skew(20deg);
z-index: -1;
}
.goldenstrip::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: #c1b07a;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 0 100%;
-webkit-transform: skew(20deg);
-ms-transform: skew(20deg);
transform: skew(20deg);
z-index: -1;
}
.goldenstrip {
text-align: center !important;
display: block;
text-transform: uppercase;
background: #C1B07A;
color: white;
font-size: 24px;
margin: 0 auto;
padding: 38px 0px;
position: relative;
font-family: "Roboto Medium";
z-index: 1;
top: 52px;
width: 90%;
}
.seminar_image img {
width: 100%;
}
<span class="goldenstrip">Hello world</span>
<div class="seminar_image"><img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" alt="" class=""></div>
Use linear-gradient and multiple background to create the shape and avoid any extra element:
.goldenstrip {
text-align: center !important;
display: block;
text-transform: uppercase;
color: white;
font-size: 24px;
margin: 0 auto;
padding: 38px 0px;
position: relative;
font-family: "Roboto Medium";
z-index: 1;
top: 52px;
width: 90%;
background:
linear-gradient(to top right, transparent 49%, #C1B07A 50%) left/ 30px 100% no-repeat,
linear-gradient(to bottom left, transparent 49%, #C1B07A 50%) right/ 30px 100% no-repeat,
linear-gradient(#C1B07A, #C1B07A) center/calc(100% - 60px) 100% no-repeat;
}
.seminar_image img {
width: 100%;
}
<span class="goldenstrip">Hello world</span>
<div class="seminar_image"><img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" alt="" class=""></div>
Related
I'm trying to create this icon using pure css & a single div
so far I've only managed to add 2 points like this:
:root {
--gear_radius: 5rem;
--gear_color: black;
--gear_thickness: 1.5rem;
--gear_pin_length: 1.5rem;
--gear_pin_gap: 1.5rem;
}
.gear {
margin: 5rem;
height: var(--gear_radius);
width: var(--gear_radius);
border-radius: 50%;
border: var(--gear_color) var(--gear_thickness) solid;
box-sizing: border-box;
position: relative;
}
.gear:before {
position: absolute;
content: "";
display: block;
height: var(--gear_pin_length);
width: var(--gear_thickness);
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
box-shadow: 0 calc(var(--gear_thickness) * 2) 0 0 black, 0 calc(var(--gear_thickness) * -2) 0 0 black;
}
.gear:after {
position: absolute;
content: "";
display: block;
height: var(--gear_pin_length);
width: var(--gear_thickness);
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
box-shadow: 0 calc(var(--gear_thickness) * 2) 0 0 black, 0 calc(var(--gear_thickness) * -2) 0 0 black;
}
<div class="gear"></div>
How do I add 2 more points at the top and bottom? I don't know what approach to take from here?
The original picture of a gear wheel has an angle to the sides of each tooth.
However, I notice that in your part-solution you aren't worried about that and have parallel edges.
Here's a snippet that puts in all 6 teeth with parallel edges.
It uses before and after pseudo elements which had stripes as background and are rotated. The main div also has a stripe for a background but additionally a radial gradient with white and black circles.
.cog {
width: 30vmin;
height: 30vmin;
position: relative;
background-image: radial-gradient(white 0 35%, black 35% 70%, transparent 70% 100%), linear-gradient(to right, black, black);
background-size: 70% 70%, 25% 100%;
}
.cog::before,
.cog::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to right, black, black);
background-size: 25% 100%;
z-index: -1;
}
.cog,
.cog::before,
.cog::after {
background-repeat: no-repeat;
background-position: center center;
transform-origin: center;
}
.cog::before {
transform: rotate(60deg);
}
.cog::after {
transform: rotate(120deg);
}
<div class="cog"></div>
Here's what it produces:
To get more sophisticated shape - such as the slope on the teeth, you could do more with gradients or just CSS clip-path (though by the time you've done this you probably might as well have created an SVG).
Well, of course SVG is better, but since your question is more of a challenge, here is my solution:
* {
margin: 0;
padding: 0;
}
.icon {
position: relative;
background: beige;
height: 160px;
width: 160px;
}
.wheel {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 32px;
height: 32px;
background: beige;
border-radius: 50%;
border: solid 24px brown;
}
.cog {
position: absolute;
width: 24px;
height: 120px;
border-radius: 6px;
background: brown;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.cog:nth-child(2) {
transform: rotate(45deg);
}
.cog:nth-child(3) {
transform: rotate(90deg)
}
.cog:nth-child(4) {
transform: rotate(135deg)
}
<div class="icon">
<div class="cogs">
<div class="cog"></div>
<div class="cog"></div>
<div class="cog"></div>
<div class="cog"></div>
</div>
<div class="wheel"></div>
<div>
This question already has answers here:
CSS Cut out circle from a rectangular shape
(3 answers)
Closed 1 year ago.
Can anyone help me with how to get the style like in the image attached below using background colour for a div? I tried adding using pseudo-classes before and after but doesn't seem to be coming through.
.card {
height: 190px;
background: #070B32;
width: 360px;
position: relative;
}
.card:before {
background: #070B32;
position: absolute;
content: "";
left: 0;
height: 50px;
border-radius: 50% 50% 0 0;
}
.card:after {
background: #070B32;
position: absolute;
content: "";
right: 0;
height: 50px;
border-radius: 50% 50% 0 0;
}
<div class="card">
</div>
Use width top values too to have semi-circles with a change in color
.card {
height: 190px;
background: #070B32;
width: 360px;
position: relative;
}
.card:before {
background: white;
position: absolute;
content: "";
left: 0;
top:35%;
width: 25px;
height: 50px;
border-radius: 0 150px 150px 0;
}
.card:after {
background: white;
position: absolute;
content: "";
right: 0;
top:35%;
width: 25px;
height: 50px;
border-radius: 150px 0 0 150px;
}
<div class="card">
</div>
Update:
div {
height: 150px;
margin: 5em 2em;
background: radial-gradient(circle at left center, transparent, transparent 30px, #070B32 30px, transparent), radial-gradient(circle at right center, transparent, transparent 30px, #070B32 30px, transparent);
border-radius: 8px;
position: relative;
width: 360px;
margin: auto;
}
body {
background-image: url(http://www.fillmurray.com/1000/1000);
background-size: cover;
}
<div>
</div>
you should use width: 50px, background-color: white;
and responsive vertical alignment:
top: 50%; transform: translateY(-50%);
.card {
height: 190px;
background: #070B32;
width: 360px;
position: relative;
}
.card:before {
background: #ffffff;
position: absolute;
content: "";
left: -25px;
top: 50%;
transform: translateY(-50%);
height: 50px;
width: 50px;
border-radius: 50%;
}
.card:after {
background: #ffffff;
position: absolute;
content: "";
right: -25px;
top: 50%;
transform: translateY(-50%);
height: 50px;
width: 50px;
border-radius: 50%;
}
<div class="card">
</div>
Or just use a background.
.card {
--circle-color: #fff;
--circle-size: 50px;
background: radial-gradient(farthest-side circle, var(--circle-color) 97%, transparent) calc(100% + (var(--circle-size) / 2)) 50% / var(--circle-size) var(--circle-size),
radial-gradient(farthest-side circle, var(--circle-color) 97%, transparent) calc(var(--circle-size) / -2) 50% / var(--circle-size) var(--circle-size),
#070B32;
background-repeat: no-repeat;
height: 190px;
width: 360px;
}
<div class="card">
</div>
I'm trying to add a point/triangle to my div with a background image but am struggling with how to create enough empty space.
Here's what I'm going for:
Here's what I have so far:
<div class="bg"></div>
.bg {
position: relative;
background: url('http://i.imgur.com/W27LCzB.jpg');
background-size: cover;
width: 100%;
padding-top: 50px;
height: 200px;
}
.bg:before {
content:'';
border-left: 50px solid #fff;
border-right: 50px solid #fff;
border-bottom: 50px solid transparent;
position:absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
}
I tried following this Stack Overflow question, but the approach in the top answer creates borders that come from the ends of the rectangular div.
Could achieve your design using another div. Hope you'll like it :)
.bg {
position: relative;
background: url('http://i.imgur.com/W27LCzB.jpg');
background-size: cover;
width: 100%;
padding-top: 50px;
height: 200px;
}
.bg:before {
content:'';
border-left: 50px solid #fff;
border-right: 50px solid #fff;
border-bottom: 50px solid transparent;
position:absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
}
.helper {
position: absolute;
height: 50px;
top: 0;
left: 0;
right: 0;
}
.helper:before, .helper:after {
content: "";
background: white;
position: absolute;
top: 0;
bottom: 0;
width: calc(50% - 50px);
}
.helper:before {left: 0;}
.helper:after {right: 0;}
<div class="bg">
<div class="helper"></div>
</div>
You can achieve what you want by using pseudo element and skew them to get the shape border
.bg {
position: relative;
background: url('http://i.imgur.com/W27LCzB.jpg');
background-size: cover;
width: 100%;
padding-top: 50px;
height: 200px;
overflow: hidden;
}
.bg:before {
content: '';
background: #fff;
position: absolute;
top: 0;
right: calc(50% + 20px);
width: 150%;
height: 50px;
transform: skewX(-40deg);
}
.bg:after {
content: '';
background: #fff;
position: absolute;
top: 0%;
left: calc(50% + 20px);
width: 150%;
height: 50px;
transform: skewX(40deg);
}
<div class="bg"></div>
I am trying to create a button with two slanted lines. One from the bottom left to the right center which I managed. The next one needs to be from the top left to the right.
The height of the left side is 50px and the height of the right side should be 30px
.slantedButton {
position: relative;
box-sizing: border-box;
padding: 5px;
height: 30px;
background-color: #3c50a2;
line-height: 15px;
color: white;
width: 150px;
z-index: 1000;
}
.slantedButton:after {
position: absolute;
width: 100%;
height: 100%;
content: '';
z-index: -1;
background-color: inherit;
top: 0;
bottom: 0;
right: 0;
left: 0;
transform-origin: top right;
transform: skewY(-4deg);
}
<div class="slantedButton">Hello World!</div>
I tried to do this with a :before but this didn't work out.
Suggestions are very much appreciated.
Thanks very much.
It works find using ::before. Just change the transform-origin:
.slantedButton {
position: relative;
box-sizing: border-box;
padding: 5px;
height: 30px;
background-color: #3c50a2;
line-height: 15px;
color: white;
width: 150px;
margin: 30px;
z-index: 1;
}
.slantedButton:before, .slantedButton:after {
position: absolute;
width: 100%;
height: 100%;
content: '';
z-index: -1;
background-color: inherit;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.slantedButton:before {
transform-origin: top right;
transform: skewY(4deg);
}
.slantedButton:after {
transform-origin: top right;
transform: skewY(-4deg);
}
<div class="slantedButton">Hello World!</div>
I'm using the following HTML / CSS to overlay a box on a website i'm working on. I want the box to center in the screen, not start based on the centering already going on. So basically the white box should be on the center of the page, not the text test
.loading {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
}
.centrediv {
height: 200px;
width: 800px;
background-color: white;
border: 1px solid black;
}
<div class="loading"><div class="centrediv">Test</div></div>
Use transform: translate(-50%, -50%), top: 50% and left: 50% on .centreDiv to center it horizontally and vertically.
.loading {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: visible;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.centrediv {
position: absolute;
height: 100px;
width: 200px;
background-color: white;
border: 1px solid black;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
<div class="loading">
<div class="centrediv">Test</div>
</div>