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>
Related
I am trying to make a sort of Venn-Diagram that is going to be used for navigation later.
I have three intersecting ellipsoids created with CSS shapes. Each ellipsoid, as well as their two intersections, will be distinct links later on. Also, when you hover over them they should pop out as per transform: scale(1.3).
My issue is that I'm using ellipsoids which are partially transparent with :after to create the intersections, which creates a problem when hovering over them because the :hover condition gets triggered when hovering anywhere on the partially transparent ellipsoid and not just the :after part. This means that the nonintersecting areas are not hoverable because they are obstructed by the other invisible ellipsoid.
I think the example will make this clearer.
Here is the code:
CSS:
.venn-container{position: relative; left: 0;}
.cat_one{
width: 400px;
height: 200px;
background: red;
border-radius: 200px / 100px;
position: absolute;
float: left;
opacity: 0.5;
}
.cat_two{
width: 400px;
height: 200px;
background: green;
border-radius: 200px / 100px;
position: absolute;
float: left;
left: 240px;
opacity: 0.5;
}
.cat_three{
width: 400px;
height: 200px;
background: blue;
border-radius: 200px / 100px;
position: absolute;
float: left;
left: 480px;
opacity: 0.5;
}
.int1{
background: transparent;
width: 400px;
height: 200px;
border-radius: 200px / 100px;
position: relative;
opacity: 0.5;
overflow: hidden;
float: left;
}
.int1:after{
background: black;
position: absolute;
content: '';
border-radius: 200px / 100px;
width: 400px;
height: 200px;
left: 240px;
}
.int1:hover{
transform: scale(1.3);
left: -35px;
}
.int2{
background: transparent;
width: 400px;
height: 200px;
border-radius: 200px / 100px;
position: relative;
opacity: 0.5;
overflow: hidden;
float: left;
left: 80px;
}
.int2:after{
background: black;
position: absolute;
content: '';
border-radius: 200px / 100px;
width: 400px;
height: 200px;
left: -240px;
}
.int2:hover{
transform: scale(1.3);
left: 115px;
}
HTML:
<div class="venn-container">
<div class="cat_one"></div>
<div class="cat_two"></div>
<div class="cat_three"></div>
<div class="int1"></div>
<div class="int2"></div>
</div>
And here is a fiddle: https://jsfiddle.net/y3Lvmuqg/2/
I would like the :hover to only get triggered in the intersections, and later make cat_one and cat_two hoverable outside the intersections.
I don't know if there is a way I'm doing this is the best and I'm open to suggestions.
Thanks for getting back to me #ge0rg I spent about an hour fiddling with CSS and HTML and came up with this code using just divs with background colors, hover events and border radius's (along with a few z-index and positioning techniques).
Hope you enjoy your reworked venn diagram...
You may have to mess around with the size, and definetly will have to mess with the positioning (however they're all inside a div and so it makes it so that you can just position the div and the rest will happen magically) I added a background color to the div just to show that nothing was transparent, and I also added a always on top function for viewing a section, and I hope you enjoy!
.Venn {
background: linear-gradient(to bottom right, blue, lightblue);
}
.d1:hover, .d2:hover, .d3:hover {
color: #565656;
animation: top 2s steps(2, end) forwards;
-webkit-animation: top 2s steps(2, end) forwards;
box-shadow: 0px 0px 20px white;
}
.d1, .d2, .d3 {
overflow-wrap: break-word;
}
.d1 center, .d3 center {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
.d1 {
padding: 10px;
width: 100px;
height: inherit;
z-index: 1;
position: absolute;
border-radius: 100%;
top: 0px;
}
.d3 {
padding: 10px;
width: 100px;
height: inherit;
z-index: 2;
position: absolute;
border-radius: 100%;
top: 0px;
left: 81px;
}
.d1:hover, .d3:hover {
transform: scale(1.05);
}
.d2 {
border-radius: 100% 0;
height: 90px;
width: 87.5px;
transform: rotate(-45deg) scale(.7);
position: absolute;
top: 15px;
left: 55.35px;
z-index: 3;
border: 1px solid black;
}
.d2b {
transform: rotate(45deg);
padding: 0;
margin: 0;
}
.d2b center {
position: relative;
left: 20px;
}
.d2:hover {
transform: rotate(-45deg);
}
.Venn {
height: 100px;
}
-webkit #keyframes top {
99% {
z-index: previous;
background-image: none;
}
100% {
z-index: 7;
}
}
#keyframes top {
99% {
z-index: previous;
background-image: none;
}
100% {
z-index: 7;
}
}
<div class="Venn" style="position: relative; left: 50px; width: 300px; height: 100px;">
<div class="d1" style=" background-color: grey;">
<center> 1 </center>
</div>
<div class="d2" style=" background-color: #AAAAAA;">
<div class="d2b" style="max-width: inherit;">
<center> 2 </center>
</div>
</div>
<div class="d3" style=" background-color: lightgrey;">
<center> 3 </center>
</div>
</div>
For those of you who would prefer a JSfiddle/ CodePen here you go a Codepen.
I am trying to scale a div, but keep the inside element at the same position and the same size. To do that, I use transform: scale(value) on wrapper and transform: scale(1/value) on the inside div.
The problem is, that the inside div shifts when I change scale. That only happens if width/height of wrapper is odd or not whole. It does not happen for even widths/height of the wrapper.
My goal is to have many child elements of wrapper that scale alongside wrapper, but only one that does not.
Take a look at this example to see problem in action (hover to scale).
Example with no issue, inner element stay fixed on scale (height and width of container are even):
https://jsfiddle.net/o16rau6u/5/
.wrapper {
width: 200px;
height: 200px;
background-color: blue;
position: relative;
}
.bg {
width: 20px;
height: 20px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -10px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.wrapper:hover {
transform: scale(2);
}
.wrapper:hover .bg {
transform: scale(0.5);
}
<div id="wrapper" class="wrapper">
<div id="bg" class="bg"></div>
</div>
Example with issue, the inner element move a little on scale (height and width of container are odd):
https://jsfiddle.net/o16rau6u/6/
.wrapper {
width: 201px;
height: 201px;
background-color: blue;
position: relative;
}
.bg {
width: 20px;
height: 20px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -10px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.wrapper:hover {
transform: scale(2);
}
.wrapper:hover .bg {
transform: scale(0.5);
}
<div id="wrapper" class="wrapper">
<div id="bg" class="bg"></div>
</div>
How can I fix this issue and avoid my elements to move on scale whataver the size of container is ?
PS : The example used above is a very simplified example to show the issue and it's not the needed output or the code used. So we are not looking for another way to achieve the same behavior above as it's pretty easy to be done.
At the start I thought this is related to the calculation done by the browser and some rounding but it's seems to be bug. I have done a lot of test and whataver the value of the scale I use it always fail on odd value.
Here is a simple example with only scaleX
body:after {
content: "";
position: absolute;
z-index: 999;
top: 0;
bottom: -200%;
width: 2px;
right: 50%;
margin-right: -1px;
background: rgba(0, 0, 0, 0.5);
}
.box {
width: 200px;
height: 100px;
margin: 50px auto;
background: blue;
position: relative;
}
.inner {
height: 20px;
width: 20px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
text-align: center;
color: #fff;
margin-top: -10px;
}
<div class="box">
<div class="inner">A</div>
</div>
<div class="box" style="transform:scaleX(2)">
<div class="inner" style="transform:scaleX(0.5)">A</div>
</div>
<div class="box" style="width:201px;transform:scaleX(2)">
<div class="inner" style="transform:scaleX(0.5)">A</div>
</div>
As you can see below, the browser seems to add an extra pixel to inner div, but if you look more closely the inner div has a correct size but it's being translated by 1px to the right. So the hover block of Dev Tools is positioned correctly but not element itself! So it seems that the browser correctly calculated the position but did a wrong painting.
The same issue appear if we simply apply scale on the container. So it's not because the scale of inner element:
body:after {
content: "";
position: absolute;
z-index: 999;
top: 0;
bottom: -200%;
width: 2px;
right: 50%;
margin-right: -1px;
background: rgba(0, 0, 0, 0.5);
}
.box {
width: 200px;
height: 100px;
margin: 50px auto;
background: blue;
position: relative;
}
.inner {
height: 20px;
width: 20px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
text-align: center;
color: #fff;
margin-top: -10px;
}
<div class="box" style="transform:scaleX(2)">
<div class="inner">A</div>
</div>
<div class="box" style="width:201px;transform:scaleX(2)">
<div class="inner">A</div>
</div>
Even if we use floating value with scale where we can say there is some rouding and complex calculation, we have correct output with even values and issue with odd values:
Example with scale(1.25) & scale(1/1.25):
body:after {
content: "";
position: absolute;
z-index: 999;
top: 0;
bottom: -200%;
width: 2px;
right: 50%;
margin-right: -1px;
background: rgba(0, 0, 0, 0.5);
}
.box {
width: 200px;
height: 100px;
margin: 50px auto;
background: blue;
position: relative;
}
.inner {
height: 20px;
width: 20px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
text-align: center;
color: #fff;
margin-top: -10px;
}
<div class="box">
<div class="inner">A</div>
</div>
<div class="box" style="transform:scaleX(1.25)">
<div class="inner" style="transform:scaleX(0.8)">A</div>
</div>
<div class="box" style="width:201px;transform:scaleX(1.25)">
<div class="inner" style="transform:scaleX(0.8)">A</div>
</div>
Example with scale(1.33) & scale(1/1.33):
body:after {
content: "";
position: absolute;
z-index: 999;
top: 0;
bottom: -200%;
width: 2px;
right: 50%;
margin-right: -1px;
background: rgba(0, 0, 0, 0.5);
}
.box {
width: 200px;
height: 100px;
margin: 50px auto;
background: blue;
position: relative;
}
.inner {
height: 20px;
width: 20px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
text-align: center;
color: #fff;
margin-top: -10px;
}
<div class="box">
<div class="inner">A</div>
</div>
<div class="box" style="transform:scaleX(1.33)">
<div class="inner" style="transform:scaleX(calc(1 / 1.33))">A</div>
</div>
<div class="box" style="width:201px;transform:scaleX(1.33)">
<div class="inner" style="transform:scaleX(calc(1 / 1.33))">A</div>
</div>
Just don't put one of these divs into another, instead put both of them into the third div like this:
.wrapper {
width: 201px;
height: 201px;
position: relative;
}
.div-1 {
width: 100%;
height: 100%;
background-color: blue;
}
.div-1:hover {
transform: scale(2);
}
.div-2 {
width: 20px;
height: 20px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -10px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
<div class="wrapper">
<div class="div-1"></div>
<div class="div-2"></div>
</div>
This way you just wont be needed to scale the inner div back to it's original height and width.
Browsers are notoriously bad at calculating stuff. There was a time when web developer math stated that (in some browsers) 33.33% times 3 was larger than 100% (but that was 14 years ago). Things have gotten much better since then, but don't rely on it. Doing resize tricks like this is not the way to go.
It seems to me that you want to resize the wrapper, while keeping the background size the same. To do so, you are using a complex transform trick, which (unprefixed) excludes 17% of all internet users. That is improper browser support and another reason not to do this.
This effect can be easily achieved with 99.99% browser support, working on all sizes.
.wrapper {
width: 402px;
height: 402px;
background-color: blue;
position: relative;
}
.bg {
width: 20px;
height: 20px;
display: block;
position: absolute;
top: 201px;
left: 201px;
margin-top: -10px;
margin-left: -10px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.wrapper:hover {
width: 4020px;
height: 4020px;
}
<div id="wrapper" class="wrapper">
<div id="bg" class="bg"></div>
</div>
If you want it to be responsive (you do!), this should do the trick:
* {padding: 0; margin: 0;}
html, body {height: 100%;}
.wrapper {
width: 50vw;
background-color: blue;
position: relative;
padding-bottom: 50%;
}
.bg {
width: 20px;
height: 20px;
display: block;
position: absolute;
top: 25vw;
left: 25vw;
margin-top: -10px;
margin-left: -10px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.wrapper:hover {
width: 500vw;
padding-bottom: 500%;
}
<div id="wrapper" class="wrapper">
<div id="bg" class="bg"></div>
</div>
(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>
div #introbox is not centering. I have used container as relative and introbox as absolute. I have set top,bottom,left and right as 0. Still box is not centring. I want to centre the introbox in the intropic.
html,body{
padding: 0;
margin:0;
}
.container{
width: 960px;
margin:0 auto;
position: relative;
}
#header{
width: 100%;
height: 120px;
border-bottom: 1px solid black;
}
#nav{
height: 55px;
border-bottom: 4px solid lightblue ;
}
#intro-pic{
height: calc(100vh - 181px);
width: 100%;
background: url("img/introbg.jpg") center fixed;
}
#intro-box{
height: 55vh;
width: 800px;
background: rgba(0,0,0,0.74);
border-radius: 15px;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left:0px;
}
<div id="header">
<div class="container">
Header
</div>
</div>
<div id="nav">
<div class="container">
Nav
</div>
</div>
<div id="intro-pic">
<div class="container">
<div id="intro-box">
sdfdsfds
</div>
</div>
</div>
Using transform:translate will work for any size div.
html,
body {
padding: 0;
margin: 0;
height:100%;
}
.container {
width: 960px;
margin: 0 auto;
position: relative;
height:100vh;
}
#intro-box {
height: 55vh;
width: 800px;
background: rgba(0, 0, 0, 0.74);
border-radius: 15px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
/* vertical centering */
}
<div id="intro-pic">
<div class="container">
<div id="intro-box">
sdfdsfds
</div>
</div>
</div>
Find the below code.
Make left position 50% and give margin-left half of the wrapper width value.
#intro-box{
height: 55vh;
width: 800px;
background: rgba(0,0,0,0.74);
border-radius: 15px;
position: absolute;
top: 0px;
bottom: 0px;
left:50%;
margin-left: -400px; /* Half of the wrapper width */
}
Try below example if you are trying exact center (from top & left)
#intro-box{
height: 55vh;
width: 800px;
background: rgba(0,0,0,0.74);
border-radius: 15px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -400px; /* Half of the wrapper width */
margin-top: -27.5vh; /* Half of the wrapper height*/
}
JSFIDDLE DEMO
#intro-box {
height: 55vh;
width: 800px;
background: rgba(0,0,0,0.74);
border-radius: 15px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -27.5vh;
}
But again, .container should have height over or equal to #intro-box
There are many ways to center Elements:
using line-height:
you want to center text and you know the size of the box:
.box { background: red; height: 200px; }
.box span { display:block; text-align: center; line-height: 200px; }
<div class="box">
<span>Text</span>
</div>
using transform:
you want to center anything but dont know the size of your box:
.box, .box2 { background: red; height: 200px; }
.box span { top: 50%; text-align: center; position: relative; display: block; transform: translateY(-50%) }
.box2 span { top: 50%; left: 50%; position: relative; display: inline-block; transform: translate(-50%, -50%) }
<div class="box">
<span>Text</span>
</div>
OR WITHOUT TEXT-ALIGN:
<div class="box2">
<span>Text</span>
</div>
using absolute position:
you know the height of the element you want to center
.box, .box2 { background: red; height: 200px; position: relative; width: 100%; }
.box span { position: absolute; background: green; height: 50px; width: 50px; top: 50%; left: 50%; margin: -25px 0 0 -25px; }
<div class="box">
<span></span>
</div>
There are even more ways to manage this.
I am trying to create a footer according to a design I received ...
The background color on the left is different from the right one:
I have the following markup:
<div class"wrapper">
<div class="content">
The Text here should no go over the logo
</div>
</div>
My idea is Content DIV to have the logo as background image aligned left and no repeat.
But then I don't know how to create the different color on left and right ...
And I am not sure if I can control the height so that everything aligns.
The content div is centered and has the orange border on the image ...
Thank You,
Miguel
Try this http://codepen.io/nicknameless/pen/cblzB/
I've used CSS3 and no additional markup. This should work for you. It could be cleaned up I think, this is just a quick overview to get you started.
The HTML you provided
<div class="wrapper">
<div class="content">
The Text here should no go over the logo
</div>
</div>
The CSS
html, body {
padding: 0;
margin: 0;
}
div.wrapper {
height: 40px;
background: #850000;
width: 100%;
display: block;
position: relative;
overflow: visible;
top: calc( 100px - 40px );
}
div.wrapper:before {
background: transparent url('http://placehold.it/100x100') no-repeat 0 0;
content: " ";
width: 100px;
height: 100px;
position: absolute;
bottom: 0;
left: 10%;
}
div.content {
left: calc( 10% + 100px );
padding-left: 10px;
bottom: 0;
background-color: #C70000;
display: block;
height: 40px;
position: absolute;
width: calc( 100% - ( 10% + 100px ) );
}
It's was really a pain in the ass, I recommend to take the inner rectangle as a picture, but if you really want it in CSS, here it's: http://jsfiddle.net/B97ym/
HTML:
<div class='wrapper'>
<div class="content">The Text</div>
<div class='border'>
<div class='border2'></div>
<div class='border3'></div>
<div class='logodiv'>
<div class='rectangle'></div>
</div>
</div>
CSS:
.wrapper {
width: 500px;
height: 50px;
margin: 100px auto;
position: relative;
background: linear-gradient(to right, #9c9e9f 40%, #000000 40%);
}
.content{
margin: 0 0 0 50%;
color: #ffffff;
}
.border{
width: 4em;
height: 4em;
background: #FF0000;
position: absolute;
left: 33.7%;
top: -55%;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
background: linear-gradient(to top, #000000 62%, #9c9e9f 62%);
}
.border2{
width: 0.8em;
height: 4em;
background: #9c9e9f;
position: absolute;
left: 80%;
}
.border3{
width: 0.8em;
height: 0.85em;
background: #000000;
position: absolute;
left: 80%;
top: 80%;
}
.logodiv {
width: 2.5em;
height: 2.5em;
background: #ffffff;
position: absolute;
top: 18%;
left: 18%;
}
.rectangle{
width: 2.1em;
height: 2.1em;
position: relative;
background: #ffffff;
top: -42%;
left: -42%;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
Hope it's will be helpful to someone (:
Use a CSS background-image on the wrapper layer that contains the entire logo, bars an all. Add enough margin-left on the inner layer to shove the text beyond the logo.
Create a div with two div's inside with 50% width for left and right and fixed height. Make sure you overflow the logo.
I wonder if this FIDDLE will give you a place to start.
CSS
.holder {
width: 500px;
margin: 100px auto;
position: relative;
}
.leftdiv {
width: 40%;
height: 60px;
float: left;
background-color: red;
}
.rightdiv {
width: 60%;
height: 60px;
float: left;
background-color: blue;
}
.logodiv {
width: 44px;
height: 44px;
position: absolute;
left: 157px;
top: -42px;
background-color: white;
transform: rotate(45deg);
border-left: 20px solid blue;
border-right: 20px solid red;
border-top: 20px solid red;
border-bottom: 20px solid blue;
}
.whiteout {
background-color: white;
width: 30px;
height: 60px;
border: 0px solid black;
position: absolute;
top: -60px;
left: 183px;
}