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>
Related
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>
For a slideshow site, I have to display images of varying sizes which may be 300*250 to 1200*1800. I am aware of image maps, but they come with fixed dimensions requirements i.e. one needs to define specific area through coordinates like coords="0,0,82,126").
I have two questions:
1) Is there a way to make it variable, like 10% of left side image area should link to previous image, and 10% of right side image area should link to next image. For example, if an image is 300*300 px size, then 30px (horizontal bar area) from the left and 30 px from the right should be the clickable area
2) Is there a CSS way to display left and right arrows on the above mentioned areas, like we usually see while navigating Facebook albums. The only difference is that these left and right arrows should actually show up in TRANSPARENT form on top of the left and right clickable areas on the images, overlapping with image for the width of the arrow picture.
Appreciate any help.
This might get you started.
html {
font-size: 10px;
}
.wrapper {
width: 1%;
display: table;
}
#images {
position: relative;
}
#left, #right {
position: absolute;
top: 0;
width: 10%;
height: 100%;
opacity: 0.8;
background-color: lightgray;
}
#left {
left:0;
}
#right {
right:0;
}
.arrow {
position: absolute;
top: 50%;
width: 2rem;
height: 2rem;
background: transparent;
border-top: .4rem solid white;
border-right: .4rem solid white;
box-shadow: 0 0 0 lightgray;
transition: all 200ms ease;
}
.arrow.left {
left: 40%;
transform: translate3d(0, -50%, 0) rotate(-135deg);
}
.arrow.right {
right: 40%;
transform: translate3d(0, -50%, 0) rotate(45deg);
}
.arrow:hover {
border-top: .4rem solid white;
border-right: .4rem solid white;
box-shadow: .2rem -.2rem 0 white;
}
.arrow:hover.left {
left: 10px;
}
.arrow:hover.right {
right: 10px;
}
<html>
</body>
</html>
<body>
<div class="wrapper">
<div id="images">
<img src="http://i.istockimg.com/file_thumbview_approve/39758696/6/stock-photo-39758696-man-on-top-of-skyscraper.jpg">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
</body>
</html>
I am trying to create a div with a background image (background-size:cover) with this shape cut out in the center top of the div.
The div above the div I want to cut this shape out of has background-image:cover on it as well. I'm trying to do this with a CSS shape, moving the lower div up using a negative margin top, so the background image on the div above shows through the cut out shape.
Note: The shape has to look identical or almost identical to the image, as it is part of a site designed by someone else, and they are very specific with their designs.
Anyone out there know how to create this shape?
EDIT: #SZenC offered a really cool solution that I implemented, except it leaves me with colored shapes overlayed on top of background images. See image:
I need the light blue pattern to show through where the gray is, and the purple texture to show through where the white is. I'm not sure at this point if this is possible, at least with CSS.
The best solution using CSS would be to use some nested elements.
You could create a div (.pointy) with two other divs inside it (.curve-left & .curve-right).
The inner divs should be sided so that they each have half of the curve. So if your curve drops 10px and goes 20px horizontal, it's height should be 10px and the width 20px. Then give it a border radius in the top-left or top-right corner of 100%. Now the curve will go trough the entire div. You could then give it a gray background-color and the parent div white in the background. Then some simple CSS-tricks to center the .pointy-div and do the backgrounds, and voila, there is your curvy triangle-y thingy.
So example below.
#c1 {
position: relative;
width: 200px;
height: 190px;
overflow: hidden;
}
#c2 {
position: relative;
top: 0px;
width: 200px;
height: 200px;
background-color: gray;
}
.pointy {
position: absolute;
top: 0px;
left: 50%;
margin-left: -20px;
width: 40px;
height: 10px;
background-image: url("http://lorempixel.com/output/technics-q-c-200-200-4.jpg");
background-position:center bottom;
}
.pointy>.curve-left,
.pointy>.curve-right{
position:absolute;
background-color:red;
width:20px;
height:10px;
background-image:url("http://lorempixel.com/output/technics-q-c-200-200-1.jpg");
}
.pointy>.curve-left{
border-top-right-radius:100%;
background-position:120px 0;
left:0;
}
.pointy>.curve-right{
border-top-left-radius:100%;
background-position:80px 0;
right:0;
}
<div id="c1">
<img src="http://lorempixel.com/output/technics-q-c-200-200-4.jpg" />
</div>
<div id="c2">
<div class="pointy">
<div class="curve-left"></div>
<div class="curve-right"></div>
</div>
<img src="http://lorempixel.com/output/technics-q-c-200-200-1.jpg" />
</div>
Here you could use a couple of pseudo elements with border radius to create that curved shape.
note there are multiple elements in this demo to show how this could be used in practice
.image {
height: 300px;
width: 80%;
background: url(http://lorempixel.com/900/500);
position: relative;
display: inline-block;
}
.shape {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: url(http://lorempixel.com/900/400);
background-position: 0 60px;
}
.shape:before,
.shape:after {
content: "";
position: absolute;
background: inherit;
height: 100%;
top: 0;
width: 50%;
transform: translateY(-100%);
}
.shape:before {
left: 0;
border-radius: 0 50% 0 0;
background-position: 0 90px;
}
.shape:after {
left: 50%;
border-radius: 50% 0 0 0;
background-position: -100% 90px;
}
<div class="image">
<div class="shape"></div>
</div>
Another, more in practical approach (with responsiveness), would be something like:
.wrap{
width:100%;display:inline-block;
position:relative;
height:600px;
}
.wrap img:first-child{
top:0;z-index:5;
}
.wrap img:last-child{
top:40%;
}
.wrap img{
position:absolute;
height:50%;width:100%;
}
.wrap .splitter{
z-index:10;
position:absolute;
top:40%; width:100%;
height:10%;
}
.wrap .splitter:before, .wrap .splitter:after{
content:"";
position:absolute;
width:50%;
height:100%;
background-size:200% 500%;
border-radius: 0 100% 0 0;
}
.wrap .splitter:after{
left:50%;
background-position:-100% 0;
border-radius: 100% 0 0 0;
}
.wrap .partA:before, .wrap .partA:after{ background-image:url("http://lorempixel.com/450/250");}
<div class="wrap">
<img src="http://lorempixel.com/900/500"/>
<span class="splitter partA"></span>
<img src="http://lorempixel.com/450/250"/>
</div>
I have a colored div that has been rotated 45 degrees and was wondering if there is way to crop the edges of it so that it fits within a certain boundry. (eg: a 45 degree line through a square that is cut off where it touches the square)
Here is the code:
#parent {
width: 200px;
height: 200px;
border: 1px solid black;
}
#child {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.red_stripe {
width: 500px;
height: 50px;
background-color: red;
position:absolute;
}
#gap {
height:100px;
}
<div id = "parent">
<div id = "child">
<div class = "red_stripe"></div>
<div id = "gap"></div>
<div class = "red_stripe"></div>
</div>
</div>
I have recreated this in JSFIDDLE: http://jsfiddle.net/RBlair/s9qusfvv/2/
So what should happen is that the red bar should be cut off where it meets the black border on the right and along the bottom sides (I am not worried about it exceeding the boundary at the top or left, just the right side and the bottom)
Add overflow:hidden to #parent
#parent {
width: 200px;
height: 200px;
border: 1px solid black;
overflow: hidden;
}
#child {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.red_stripe {
width: 500px;
height: 50px;
background-color: red;
}
#gap {
height: 100px;
}
<div id="parent">
<div id="child">
<div class="red_stripe">
</div>
<div id="gap">
</div>
<div class="red_stripe">
</div>
</div>
</div>
Let's reduce the HTML required
Pseudo element background
Use overflow: hidden, but create the lines with a ::before pseudo element and no extra HTML.
We can use:
inner box shadow to create the lines (useful as it does not take up space like a border)
position: absolute to position the :before along with a percentage height, width, left and right
position: relative on the div so that the pseudo element is positioned in relation to it
Complete Example
div {
width: 200px;
height: 200px;
border: 1px solid black;
position: relative;
overflow: hidden;
}
div::before {
content: '';
display: block;
position: absolute;
top: 0;
left: -50%;
box-shadow: inset 0 0 0 50px #F00;
height: 100%;
width: 200%;
transform: rotate(45deg);
z-index: -1;
}
<div class="box">
</div>
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/