Putting a div to the center of the viewport with position:absolute and top:50%; left:50%; transform: translate(-50%, -50%).
and using before and after elements with rotate(60deg) and rotate(-60deg).
setting the divs box-sizing: border-box; border:1px solid blue; height:40px; and 20*2*3^(1/2) seems to be 69.28xxxxxxx, so I set the width as that.
but the result seems there are some unperfect pixels at the border crossing point. I don't know how to fix it.
browser: chrome
editor:bracket
http://jsfiddle.net/gonejack/hYN67/
The borders might be distorting the shapes in your fiddle.
Check out this fiddle: http://jsfiddle.net/zqS3Q/ and replace with this code to see a solid hexagon with no borders:
#container {
position: relative;
border: 1px solid red;
margin-top: 10%;
min-height: 200px;
}
#horizontal {
position: absolute;
box-sizing: border-box;
top: 50%;
left: 50%;
height: 39px;
width: 66px;
background-color: blue;
}
#horizontal:before {
content: "";
position: absolute;
box-sizing: border-box;
height: 39px;
width: 66px;
background-color: blue;
-webkit-transform: rotate(240deg);
}
#horizontal:after {
content: "";
position: absolute;
box-sizing: border-box;
height: 39px;
width: 66px;
background-color: blue;
-webkit-transform: rotate(120deg);
}
Also, rotated boxes aren't necessarily going to be the exact specified pixel dimensions:
It seems like a chrome console bug, the console turn on then the shape would became weird, when the console high enough to give the viewport a scrollbar.
It seems to work if rather than 60deg in horizontal:after you put in -120deg. It looks like a rounding error.
http://jsfiddle.net/m3Xx8/
Related
Here are two pseudo element before and after on same element. Both have 1px width. When I change the zoom of browser at some points it seems that their width is different.
.main::after,
.main::before {
content: "";
position: absolute;
height: 17px;
width: 1px;
background-color: orange;
top: 50%;
transform: translate(-50%, -50%);
}
.main::after {
left: 70%;
}
.main::before {
left: 30%;
}
.main{
position: relative;
padding:30px;
width: 12px;
}
<div class="main"></div>
You will be able to notice the issue by changing the browser zoom.
Yes, this is a well known phenomenon.
It comes about because the system is trying to match one CSS pixel onto a screen which uses several screen pixels to hold one CSS pixel.
This can lead to edge effects (sort of like rounding errors) when the user zooms in or out. At certain zoom levels it can match a whole number of pixels, but at others it has to decide whether to leave out (or include) some screen pixels.
If you make your bar have 2px (CSS) width then at least on my system while I do see the phenomenon at 90% and 110% zoom I don't see it on others.
.main::after,
.main::before {
content: "";
position: absolute;
height: 17px;
width: 2px;
background-color: orange;
top: 50%;
transform: translate(-50%, -50%);
}
.main::after {
left: 70%;
}
.main::before {
left: 30%;
}
.main{
position: relative;
padding:30px;
width: 12px;
}
<div class="main"></div>
Okay, so whenever I try to create a diamond the edges of the diamond go out of it's width, and I'm not looking to fix this using margin, I want the actual width and height to change.
Here's how I would create a diamond shape..
diamond{
width:65px;
height:65px;
border:3px solid #0E4991;
transform: rotate(45deg);
}
This is what happens:
Image
How do I fix this?
If you have an element that is 65px wide/high, when you rotate is the vertical/horizontal dimensions change according... because a transfom is an entirely visual effect.
As such, if you need the rotated element to fit into a 65px by 65px space you have to reduce the size.
The ratio in question is the square root of 2 = 1.1412
So the new dimensions will be the original values divided by that figure.
* {
box-sizing: border-box;
}
.parent {
width: 65px;
height: 65px;
margin: 3em auto;
border: 1px solid green;
position: relative;
}
.diamond {
width: calc(100%/1.4142);
height: calc(100%/1.4142);
border: 3px solid #0E4991;
position: absolute;
;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
<div class="parent">
<div class="diamond"></div>
</div>
Hey guys I had to create simple dots on a carousel like so:
And hence I used the following method:
.banner-nav-dots > li > a {
position: relative;
}
.banner-nav-dots > li.active > a:after {
content: '';
background: #6e2c91;
height: 5px;
width: 5px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
border-radius: 50%;
}
Now that should have really centered the dot , but as can be seen on THIS LINK, they are not exactly aligning in the center. Why? Why are they not aligning in the center?
Below is a MVCE:
.circle {
position: relative;
box-sizing: border-box;
display: inline-block;
border: 2px solid #6e2c91;
border-radius: 50%;
height: 15px;
width: 15px;
}
.circle:after {
position: absolute;
content: '';
display: inline-block;
height: 5px;
width: 5px;
top: 50%;
left: 50%;
border-radius: 50%;
background: #6e2c91;
transform: translate(-50%, -50%);
}
<div class='circle odd-numbered'></div>
I am more interested in the WHY part. Can somebody explain please?
P.S. this absolute position method combined with transform has always worked for me, but just on this instance its caused this issue and I don't know why. Checked both in FF and Chrome.
The problem seems to be due to a combination of odd numbered dimensions for parent container (height: 15px, width: 15px) and the 50% value for positioning attributes on child (top: 50%, left: 50%). This means that the actual calculated value will be 5.5px ((15px - 4px) / 2) for left and top (15px - 4px due to box-sizing: border-box also being applied on the parent).
When such fractional values are encountered, it looks like the browsers round-off the value. I couldn't find anything about this in the specs (whether it should be a round-up or down) and there aren't many recent articles on the net also about this particular thing. However, I did manage to find this old article which says that each browser treats them differently. Some round it down whereas others round it up. Either ways, the child element is not going to at the exact center.
The fix for this case seems to be to set an even-numbered value for the parent's dimensions.
.circle {
position: relative;
box-sizing: border-box;
display: inline-block;
border: 2px solid #6e2c91;
border-radius: 50%;
}
.odd-numbered {
height: 15px;
width: 15px;
}
.even-numbered {
height: 16px;
width: 16px;
}
.circle:after {
position: absolute;
content: '';
display: inline-block;
height: 5px;
width: 5px;
top: 50%;
left: 50%;
border-radius: 50%;
background: #6e2c91;
transform: translate(-50%, -50%);
}
<h4>Odd Numbered Dimensions - PROBLEM </h4>
<div class='circle odd-numbered'></div>
<h4>Even Numbered Dimensions - NO PROBLEM </h4>
<div class='circle even-numbered'></div>
I currently need to make something with CSS that would look like this:
I managed to do it with this:
.top {
position: relative;
}
.top .gray-bar {
position: absolute;
width: 100%;
height: 50px;
background-color: #cdcbcc;
-ms-transform: rotate(1.2deg);
transform: rotate(1.2deg);
margin-top: -25px;
z-index: 2;
}
.top .cyan-bar {
position: absolute;
width: 100%;
height: 90px;
background-color: #2ca1ab;
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
z-index: 1;
margin-top: -30px;
margin-left: -400px;
}
.top .purple-bar {
position: absolute;
width: 100%;
height: 50px;
background-color: #b71e4c;
-ms-transform: rotate(0.7deg);
transform: rotate(0.7deg);
margin-top: -5px;
z-index: 0;
}
<div class="top">
<div class="gray-bar"></div>
<div class="cyan-bar"></div>
<div class="purple-bar"></div>
</div>
However, when I resize my window, at some point of time, the "cyan" triangle is causing issue because of the margins and the rotation. Therefore, I added some media queries to modify the rotation angle depending on the width of the screen but I feel that it's a bit "playing around" and that there is a better solution to achieve this.
I tried using borders to make the overlapping triangles but as it cannot be expressed as percentage, I'm a bit stuck. Indeed, the goal is that the result looks about the same whatever the user's screen resolution.
Is there a better solution than mine ?
Considering that the .top element uses the full viewport width, you can use viewport percentage units for the borders. This will make the triangles relative to the viewport width.
See this example with one div :
body,html{margin:0;padding:0;}
.topBar{
position:relative;
height:35px;
border-bottom:30px solid transparent;
border-right:100vw solid #B71E4C;
}
.topBar:before, .topBar:after{
content:'';
position:absolute;
top:0; left:0;
height:15px;
}
.topBar:before{
border-bottom:50px solid transparent;
border-left:100vw solid #2CA1AB;
}
.topBar:after{
border-bottom:40px solid transparent;
border-right:100vw solid #CDCBCC;
}
<div class="topBar"></div>
Maybe this help you, but, #web-tiki its the best solution, using pseudo-selectors: :before & :after
.top {
overflow: hidden;
height: 90px;
}
.top .gray-bar {
position: relative;
width: 100%;
height: 50px;
background-color:#cdcbcc;
-ms-transform: rotate(1.3deg);
transform: rotate(1.3deg);
margin-top:-35px;
z-index: 2;
}
.top .cyan-bar {
position: relative;
width: 150%;
height: 50px;
background-color:#2ca1ab;
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
z-index:1;
top: -5px;
margin-top:-30px;
margin-left:-100px;
}
.top .purple-bar {
position: relative;
width: 100%;
height: 20px;
background-color:#b71e4c;
-ms-transform: rotate(0.7deg);
transform: rotate(0.7deg);
margin-top: -20px;
z-index:0;
}
<div class="top">
<div class="gray-bar"></div>
<div class="cyan-bar"></div>
<div class="purple-bar"></div>
</div>
I'm not even sure this is possible, I'm looking to make a see-trough "border"/cut-out around an element. Like in the image below, the point is to make the background show between the magenta element in the centre and the grey elements.
So far all I have managed is a solid colour border around the magenta element. Using the following class, this gives me the desired result but only on a white background.
.app.center {
height: 40px;
width: 28px;
z-index: 5000;
border-radius: 3px;
box-shadow: 0 0 0 3px white;
}
See this fiddle for my entire CSS.
Setting a transparent border as suggested in the comments does not solve my problem (tested in FF40). I am trying to create a transparent gap around my middle div element (the magenta one). Setting a transparent border on this element does not work.
I am looking for a way to clip the sibling divs that fall behind the middle div so a small piece of the background is visible on either side of the middle element that follows the edge/shape of the centre element.
Yes, this is basically impossible. That's why I am trying to provide an answer :-)
My solution will not work on IE, and limits you to use primary colors in the elements. As far as I know, it's the only way to get this result.
The trick is to use a blend mode, that translates gray into transparent. And the borders of the element will be gray, so will show the underlying background
.bkg {
width: 200px;
height: 200px;
border: solid 1px black;
background-image: repeating-linear-gradient(45deg, white 0px, lightblue 40px);
}
.button {
width: 100px;
height: 100px;
border-radius: 20%;
border: solid 10px gray;
position: absolute;
font-size: 80px;
}
#bt1 {
left: 40px;
top: 20px;
background-color: red;
}
#bt2 {
left: 80px;
top: 90px;
background-color: rgb(255,0,255);
}
.panel {
position: absolute;
top: 0px;
width: 200px;
height: 200px;
mix-blend-mode: hard-light;
}
<div class="bkg"></div>
<div class="panel">
<div class="button" id="bt1">-1-</div>
<div class="button" id="bt2">-2-</div>
</div>
If your purpose could be met with a "faux"-transparency, then you could make use of the border-image. However, this is not a true solution. Also, you would lose border-radius when you use a border-image.
The trick is to use as border-image the same image that you use for your background-image on lower-layer div or body. This will give the "illusion" of transparency clipping through the sibling divs which are at a lower-level.
Example:
* { box-sizing: border-box; }
body { background-image: url(http://i.stack.imgur.com/lndoe.jpg); }
.sphere {
position: relative; background-color: #444;
left: 200px; top: 100px; height: 100px; width: 200px;
border-top-right-radius: 100px; border-top-left-radius: 100px;
text-align: center; padding-top: 10px; color: white;
}
.app {
position: absolute; transform-origin: center 75px; background: #cc4489;
border-radius: 5px; left: 72px; top: -72px; height: 64px; width: 52px;
}
div.sphere > .app:first-child {
transform: scale(0.9) rotate(-30deg);
background: #adabae; top: -72px;
}
div.sphere > .app:last-child {
transform: scale(0.9) rotate(30deg);
background: #79787a; top: -72px;
}
.app.center {
height: 64px; width: 52px; z-index: 5000;
background-clip: padding-box; background-origin: padding-box;
border-image: url(http://i.stack.imgur.com/lndoe.jpg) 10;
border-width: 5px;
}
<div class=" sphere">
<div class="app"></div>
<div class="app center">3</div>
<div class="app"></div>
</div>
Fiddle: http://jsfiddle.net/abhitalks/aoh8vc8v/
As applied to your fiddle: http://jsfiddle.net/abhitalks/L6deaazy/3/
Disclaimer: This is faux clipping. clip-path and mask could be better put to use.