(source: renemax.nl)
I need to create a figure like this with CSS codes. The black could be completly covered with a background-image or a softer backgroundcolor with text (quotes) on it.
Is this possible to create with CSS? I can't find this figure with the css generators online.
Any tips appreciated.
.element {
position: relative;
background: #000;
margin: 20px auto;
padding: 20px;
height: 300px;
width: 200px;
color: #fff;
}
.element:before,
.element:after,
.element .box:before,
.element .box:after{
transform: rotate(-45deg);
top: calc(50% - 50px);
border-radius: 5px;
position: absolute;
background: #000;
content: '';
height: 100px;
width: 100px;
z-index: -1;
left: 0;
}
.element:after,
.element .box.top:after,
.element .box.bottom:after {
right: 0;
left: auto;
}
.element .box.top:before,
.element .box.top:after {
top: 0;
}
.element .box.bottom:before,
.element .box.bottom:after {
top: auto;
bottom: 0;
}
<div class="element">
Content Goes Here....
<div class="box top"></div>
<div class="box bottom"></div>
</div>
Related
I have a shape in my photoshop layers, I'm attaching the image of that shape. Will you please write how to generate it from CSS3.
You can use css :after effect
<div class="shape"></div>
.shape {
width: 100px; height: 100px;
line-height: 100px;
background-color: #fc0;
display: inline-block;
margin-left: 50px;
position: relative;
z-index: 2;
text-decoration: none;}
.shape:after {
content: "";
width: 100px; height: 100px;
background-color: #fff;
position: absolute;
top: 0; right: -50px;
border-radius: 50%;
z-index: 3;}
.img-shape { width: 367px; height: 623px; background-color: #bababa; display:block; margin-left: 50px; position: relative; z-index: 2;} .img-shape:after { content: ""; width: 562px; height: 840px; background-color: #FFFFFF; position: absolute; top: -108px; right: -470px; border-radius: 50%; z-index: 3;}
You can create a background layer container and place overlay shape container in same parent. Please check below code. I hope it will help you.
.container{width:300px;
height:500px;
background:#ccc;
position:relative}
.circle{width:300px;
height:540px; background:#fff;
position:absolute;
left:52%;
top:-10px;
border-radius:100%
}
<div class="container">
<div class="circle"></div>
</div>
I would like to center a circle on a line, like this:
I've got the following code:
.circle {
width: 75px;
height: 75px;
border-radius: 50%;
position: absolute;
left: 76%;
top: 41px;
background-color: #000;
}
.box {
width:500px;
height:150px;
position: relative;
border: 1px solid #eee;
.left {
width:200px;
height:100%;
position:relative;
}
<div class="Box">
<div class="Left">
<div class="circle">
</div>
</div>
<div class="Right"></div>
</div>
However, when i resize the windows, it ends up like this:
How can i make sure the circle stays in place, even when i resize my window?
You could take a different approach and use the border-right property on the .left div to represent the vertical line behind the .circle:
.circle {
width: 75px;
height: 75px;
border-radius: 50%;
position: absolute;
right: -37.5px; /* modified / - half of the circle's width */
top: 41px;
background-color: #000;
}
.box {
width: 500px;
max-width: 100%; /* added / responsive */
height: 150px;
position: relative;
border: 1px solid #eee;
}
.left {
width: 200px;
max-width: 100%; /* added / responsive */
height: 100%;
position: relative;
border-right: 1px solid #eee; /* added */
}
<div class="box">
<div class="left">
<div class="circle">
</div>
</div>
<div class="right"></div>
</div>
Another simply way to do this is using pseudo element like this :
.box {
margin: 10px auto;
max-width: 400px;
border: 1px solid #000;
text-align: center;
position: relative;
}
.box:before {
content: " ";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 1px;
margin-left: -0.5px;
background: #000;
}
.cirle {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
background: #000;
margin: 20px 0;
}
<div class="box">
<div class="cirle"></div>
</div>
this part of the code will make sure the line will stay at the center:
.box:before {
left: 50%;
margin-left: -0.5px;
}
What I'm trying to do is this:
So I gave my banner a border-top-right-radius of 100px 20px. I was kind of able to copy the border-radius in the image. The problem is that I couldn't copy the border. I tried applying border:10px solid #fff and it looks distorted/weird. Here's what I have right now:
With this work around you could get what you want i tried it with border but that doesn't seem to work.
body{background: gray;}
.wrapper {
position: relative;
width: 300px;
height: 200px;
margin: 50px auto;
}
.image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: url(https://scproxy-prod.adobecc.com/api?X-Location=https%3A%2F%2Fcc-eu1-prod.adobesc.com%2Fapi%2Fv1%2Fassets%2F3fd53348-7e53-46f1-a1fa-f03a8fe5cb6c%2Frenditions%2Fjpg%2F1200?&v=1473018134655&Authorization=Bearer%20eyJ4NXUiOiJpbXNfbmExLWtleS0xLmNlciIsImFsZyI6IlJTMjU2In0.eyJmZyI6IlFYMjdaT0RKQU1BQUFBQUFBQUFBQUFFTEFBPT09PT09IiwiYXMiOiJpbXMtbmExIiwiYyI6ImhpdWExbFdqQTBzbVpoTFhZSnFqUkE9PSIsInVzZXJfaWQiOiI0ODQ0MjkxRTRGNzA3ODgxMEE0OTBENDVAQWRvYmVJRCIsIm1vaSI6IjE5OTZlMGRiIiwic2NvcGUiOiJBZG9iZUlELG9wZW5pZCxnbmF2LGNyZWF0aXZlX2Nsb3VkLHJlYWRfb3JnYW5pemF0aW9ucyxhZGRpdGlvbmFsX2luZm8uc2NyZWVuX25hbWUsYWRkaXRpb25hbF9pbmZvLnNlY29uZGFyeV9lbWFpbCxhZGRpdGlvbmFsX2luZm8ucm9sZXMsc2FvLmNjcHJpdmF0ZSxzYW8uY2NfZXh0cmFjdCxzYW8uY2NlX3ByaXZhdGUsYWNjb3VudF90eXBlLHNhby5jY3B1Ymxpc2giLCJjcmVhdGVkX2F0IjoiMTQ3MzQ0MDQwOTU5NyIsImlkIjoiMTQ3MzQ0MDQwOTU5Ny0xNjBiYjc2Yy0xNmU0LTQzOTctYjY1ZC0wMDQ4NWQ5M2EzMWMiLCJ0eXBlIjoiYWNjZXNzX3Rva2VuIiwiZXhwaXJlc19pbiI6Ijg2NDAwMDAwIiwiY2xpZW50X2lkIjoiQ3JlYXRpdmVDbG91ZFdlYjEifQ.kgR1X7vFpAnkrQGyY2jbo4dtxPSsugHw4ms9ij-hDbrvJdsr2vO_n3GhbRDlzCA1BSkvbkg54c5w2x4lYiRS965VauxjwmLYlUHsEMCBXQmsMmf-_iT68AL-lh9kcec-y10XVBlYk96KQw84PFHn03x1eQK3xXtlrrtmWhys5lcsjZc2dklrfbcy4TlDYWQfYACCaEg4up3_BVZljr3r8u11eF40tormcJTLW7HqFRQf2QL3IP6u2vu3flSBI5wd_XDQGXusF424Exsv1VV4as24e994w3jH_GvUDo8sffCQFJmb5lEfWZOxwG6SUHAbmYG501FDepjlCaGIp7tCdQ);
background-size: cover;
width: calc(100% - 10px);
height: calc(100% - 10px);
border-top-right-radius: 100px 20px;
z-index: 2;
}
.border {
position: absolute;
top: 0;
left: 0;
background: white;
width: 100%;
height: 100%;
border-top-right-radius: 96px 22px;
z-index: 1;
}
<div class="wrapper">
<div class="image"></div>
<div class="border"></div>
</div>
Here's a brief explanation of my diagram (shown below):
The yellow box is the parent.
The black and cyan boxes are children of the yellow box.
The excess cyan box is hidden by it's parent via overflow: hidden
Since overflow: hidden breaks margin: auto, I've attempted to center the black box to its parent (i.e. the yellow box) by using left: 50%. However, the black box aligns itself to the full width of the cyan box.
Could someone explain another way I can align the black box to the width of its parent? I would accept an answer that fixes margin: auto as well.
Here is my code:
.yellow-box {
display:table-cell;
height:498px;
width:33.33333333%;
overflow:hidden;
position:relative;
}
.cyan-box {
display:block;
height:auto;
position:absolute;
z-index:1;
top:0;
left:0;
width:654px;
height:654px;
}
.black-box {
width:144px;
height:84px;
position:absolute;
z-index:2;
}
What a fantastic optical illusion you've accidentally created!
Really though, left: 50% is working just fine. While it looks like .black-box is centering to .cyan-box, in reality left: 50% is moving the leftmost side of .black-box—not the center as you are expecting—to the center of .yellow-box. Fixing this is easy with the addition of transform: translate(-50%); to .black-box. This moves .black-box back 50% of its width, which truly centers it to its parent.
.black-box {
width: 144px;
height: 84px;
position: absolute;
z-index: 2;
background: black;
left: 50%;
transform: translate(-50%);
}
.yellow-box {
height: 498px;
width: 33.33333333%;
position: relative;
background: yellow;
margin-bottom: 20px;
}
.cyan-box {
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 654px;
height: 654px;
background: cyan;
}
.half {
width: 50%;
border-right: 1px black solid;
height: 100%;
}
<div class="yellow-box">
<div class="black-box">
</div>
<div class="cyan-box">
</div>
<div class="half"></div>
</div>
The illusion breaks when the size of the page changes. I've added a line down the center so you can see the middle of .yellow-box.
Here's an example comparing the difference.
.yellow-box {
height: 100px;
width: 33.33333333%;
position: relative;
background: yellow;
margin-bottom: 20px;
}
.cyan-box {
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 654px;
height: 100px;
background: cyan;
}
.black-box {
width: 144px;
height: 84px;
position: absolute;
z-index: 2;
background: black;
left: 50%;
}
.black-box-two {
width: 144px;
height: 84px;
position: absolute;
z-index: 2;
background: black;
left: 50%;
transform: translate(-50%);
}
.half {
width: 50%;
border-right: 1px black solid;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
<div class="yellow-box">
<div class="black-box">
</div>
<div class="cyan-box">
</div>
<div class="half"></div>
</div>
<div class="yellow-box">
<div class="black-box-two">
</div>
<div class="cyan-box">
</div>
<div class="half"></div>
</div>
So .black-box is not really aligning to it's sibling at all, it just looks that way.
If you want to be able to use margin: 0 auto then you need to use position: relative on .black-box. Margin's have no affect on absolutely positioned elements.
.yellow-box {
height: 498px;
width: 33.33333333%;
position: relative;
background: yellow;
margin-bottom: 20px;
overflow: hidden;
}
.cyan-box {
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 654px;
height: 654px;
background: cyan;
}
.black-box {
width: 144px;
height: 84px;
position: relative;
z-index: 2;
background: black;
margin: 0 auto;
}
.half {
width: 50%;
border-right: 1px black solid;
height: 100%;
}
<div class="yellow-box">
<div class="black-box">
</div>
<div class="cyan-box">
</div>
<div class="half"></div>
</div>
If you use position: relative instead of position: absolute, margins once again take effect. You can even still use top, right, bottom, and left if you care to do so.
Here's an example contrasting the two working solutions with the code you provided (left is using transform: translate(-50%), middle is the original code, and the right is using margin: 0 auto).
.yellow-box {
height: 100px;
width: 30%;
position: relative;
background: yellow;
margin-bottom: 20px;
overflow: hidden;
}
.cyan-box {
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 654px;
height: 100px;
background: cyan;
}
.black-box {
width: 144px;
height: 84px;
position: relative;
z-index: 2;
background: black;
margin: 0 auto;
}
.black-box-two {
width: 144px;
height: 84px;
position: absolute;
z-index: 2;
background: black;
left: 50%;
margin: 0 auto;
}
.black-box-three {
width: 144px;
height: 84px;
position: absolute;
z-index: 2;
background: black;
left: 50%;
transform: translate(-50%);
}
.half {
width: 50%;
border-right: 1px black solid;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: space-between;
}
<div class="yellow-box">
<div class="black-box">
</div>
<div class="cyan-box">
</div>
<div class="half"></div>
</div>
<div class="yellow-box">
<div class="black-box-two">
</div>
<div class="cyan-box">
</div>
<div class="half"></div>
</div>
<div class="yellow-box">
<div class="black-box-three">
</div>
<div class="cyan-box">
</div>
<div class="half"></div>
</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/