I would like to make a diamond shape with a image background. I can do it, the only problem is the image seems to rotate at the same time which i do not want. This also needs to work in ie8
fiddle:http://jsfiddle.net/zangief007/2bft2rcx/1/
#diamond {
width: 80px;
height: 80px;
background: purple;
margin: 3px 0 0 30px;
/* Rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* Rotate Origin */
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
Try removing the rotation and adding
#diamond:before, #diamond:after{
content: '';
border: 80px solid transparent;
position: absolute;
top: 50%;
margin-top: -80px;
z-index: -1;
}
#diamond:before {
border-right-color: #ccc;
border-left: none;
right: 50%;
}
#diamond:after {
border-left-color: #ccc;
border-right: none;
left: 50%;
}
Demo
Related
I need to make a hexagon that contains mini shapes inside of it.
Like so:
I can make a hexagon div but I cant get my smaller shapes fit in it. They fit as if my hexagon is a rectangle.
I tried:
<style>
.hexagon {
overflow: hidden;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
cursor: pointer;
}
.hexagon-in1 {
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon1 {
width: 400px;
height: 200px;
margin: 0 0 0 -80px;
}
</style>
<div class="hexagon hexagon1"><div class="hexagon-in1"></div></div>
Hex shape generator using Sass
HTML
<div class="hex-shape"></div>
SASS(scss)
// need for mathematical calculations
$SQUARE_ROOT_3: 1.73;
$hex-shape-w: 100px;
$hex-shape-h: round($hex-shape-w / $SQUARE_ROOT_3);
$hex-shape-color: red;
.hex-shape {
position: relative;
display: inline-block;
box-sizing: border-box;
width: $hex-shape-w;
height: $hex-shape-h;
background-color: $hex-shape-color;
margin: ($hex-shape-h / 2) 0;
&::before,
&::after {
position: absolute;
left: 0;
content: '';
display: inline-block;
border-bottom: $hex-shape-h / 2 solid $hex-shape-color;
border-right: $hex-shape-w / 2 solid transparent;
border-left: $hex-shape-w / 2 solid transparent;
}
&::before {
top: -50%;
}
&::after {
bottom: -50%;
transform: scale(-1);
}
&:hover {
background-color: green;
&::before,
&::after {
border-bottom-color: green;
}
}
}
This is shape generator.
And I did one pen exmple https://codepen.io/stojko/pen/boWOwK?editors=1100
You can change shape size by changing $hex-shape-w variable and also if you make them bigger you must change $hex-container-w variable.
I wish I had more time to do this with JavaScript.
If you find this answer helpful, let me know.
Following this question, I created a JSFiddle, but the output doesn't seem so good:
Here is the CSS, taken from the answer there:
#heart {
position: relative;
width: 100px;
height: 90px;
margin-top: 10px;
/* leave some space above */
}
#heart:before {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 52px;
height: 80px;
background: red;
/* assign a nice red color */
border-radius: 50px 50px 0 0;
/* make the top edge round */
}
#heart:before {
-webkit-transform: rotate(-45deg);
/* 45 degrees rotation counter clockwise */
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
/* Rotate it around the bottom-left corner */
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
/* placing the right part properly */
-webkit-transform: rotate(45deg);
/* rotating 45 degrees clockwise */
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
/* rotation is around bottom-right corner this time */
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
Did I miss something, or that love got old (it's about 2 years old)?
I was messing around a bit with your JSfiddle and I noticed that you were only drawing one side of your heart :(
Here's the updated CSS that will fix your poor broken heart
#heart:before, #heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 52px;
height: 80px;
background: red;
/* assign a nice red color */
border-radius: 50px 50px 0 0;
/* make the top edge round */
}
Here's a link to the working JSfiddle: https://jsfiddle.net/arfc63Le/1/
You missed the second selector for your second CSS rule.
The four rules should be:
#heart {}
#heart:before,
#heart:after {}
#heart:before [}
#heart:after {}
Here is the full demo:
#heart {
position: relative;
width: 100px;
height: 90px;
margin-top: 10px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
top: 0;
width: 52px;
height: 80px;
background: red;
border-radius: 50px 50px 0 0;
}
#heart:before {
left: 50px;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
#heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
<div id="heart"></div>
Looks like you missed one of the steps. It isn't very obvious in the other answer.
You need a copy of
#heart:before {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 52px;
height: 80px;
background: red;
/* assign a nice red color */
border-radius: 50px 50px 0 0;
/* make the top edge round */
}
for #heart:after. So you need to add the following and it works (JSFiddle)
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 52px;
height: 80px;
background: red;
/* assign a nice red color */
border-radius: 50px 50px 0 0;
/* make the top edge round */
}
I'm trying to put a border around a hexagon shaped div or more accurate the hexagon shaped visible area of 3 divs. I have tried some different ways of creating a border playing around with the visibility of the divs. What I have in the below example is the closest I came but still showing the overflow of the divs thats should be hidden.
I found the code to create hexagon shapes here or on git can't remember where exactly. so that isn't my creation.
.hexagon {
overflow: hidden;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
cursor: pointer;
}
.hexagon-in1 {
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon-in2 {
overflow: hidden;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50%;
visibility: visible;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon {
width: 200px;
height: 300px;
}
#hex1_bg{ background-color: rgb(181,144,223) }
.hexagon, .hexagon-in1, .hexagon-in2{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-left: 5px solid gold;
border-right: 5px solid gold;
}
<div class="hexagon" id="hex1">
<div class="hexagon-in1">
<div class="hexagon-in2" id="hex1_bg">
</div>
</div>
</div>
Update:
Wasn't happy with the looks of the suggested solution it does fix the border problem but created a other problem for me with the pointer already changing when hoover over the white space surrounding the hexagon
I get exactly what i want by adding 3 extra divs and lots of extra css still not happy with it so hoping someone has any suggestions.
The code show what i want to create but preferable with less code.
.hexagon {
position: relative;
overflow: hidden;
visibility: hidden;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
cursor: pointer;
}
.hexagon-in1 {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon-in2 {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50%;
visibility: visible;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon {
width: 200px;
height: 300px;
}
#hex1_bg{ background-color: rgb(181,144,223) }
.bordergon{
width: 100%;
height: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-left: 2px solid red;
border-right: 2px solid red;
}
.bordergon-in1{
overflow: hidden;
position: absolute;
top: 0;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
width: 100%;
height: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-left: 2px solid red;
border-right: 2px solid red;
}
.bordergon-in2{
overflow: hidden;
position: absolute;
top: 0;
-webkit-transform: rotate(-120deg);
-moz-transform: rotate(-120deg);
-ms-transform: rotate(-120deg);
-o-transform: rotate(-120deg);
transform: rotate(-120deg);
width: 100%;
height: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-left: 2px solid red;
border-right: 2px solid red;
}
<div class="hexagon" id="hex1">
<div class="hexagon-in1">
<div class="hexagon-in2" id="hex1_bg">
<div class="bordergon"></div>
<div class="bordergon-in1"></div>
<div class="bordergon-in2"></div>
</div>
</div>
</div>
I think I have a solution. There is a fair amount of CSS but it only uses two divs. You have a hexagon inside a hexagon and use the outer one as the border.
#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
margin-top: 25px;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}
#hexagonIn {
width: 95%;
height: 95%;
background: blue;
position: relative;
margin: auto;
margin-top: 25px;
}
#hexagonIn:before {
content: "";
position: absolute;
top: -22px;
left: 0;
width: 0;
height: 0;
border-left: 47px solid transparent;
border-right: 47px solid transparent;
border-bottom: 23px solid blue;
}
#hexagonIn:after {
content: "";
position: absolute;
bottom: -24px;
left: 0;
width: 0;
height: 0;
border-left: 47px solid transparent;
border-right: 47px solid transparent;
border-top: 24px solid blue;
z-index: 1;
}
And the HTML:
<div id="hexagon">
<div id="hexagonIn"></div>
</div>
A lot of the CSS can actually be shortened if you can be bothered. It's a fair amount shorter and the CSS is fairly clean.
Also in the future, I advise that you use prefix-free. It's a JS script that automatically adds browsers prefixes to your CSS meaning you can just put
transform: rotate(-60deg);
And it'll add -moz-, -webkit-, -ms- and -o-.
Hope this works for you..
How to place an image centrally over another image?
I tried the answers from so many similar questions, but none of them work for me.
Basically I need the 2 images to become 1 and
it MUST be RESPONSIVE(so the size changes automatically when different screen size devices access the web page.)
The heart and ring should remain the same position to each other when user resize his or her screen(or web page window size etc.)
I am trying to use css to draw both the ring and the heart, but it is okay if you really need the picture to replace the ring or heart.
Here is my code, I have been working on it for hours but haven't got any good luck.
http://jsfiddle.net/4u6tfacw/
Thank you.
Here is my code
<div id="logo">
<div id="heart-container">
</div>
<div id="heart">
</div>
</div>
#logo {
width: 50%;
height: 50%;
}
#heart {
display: block;
position: absolute;
top: 70px;
left: 30px;
z-index: 1;
width: 70%;
height: 70%;
}
#heart-container {
display: block;
position: absolute;
top: 0;
left: 0;
/*bottom:0;
right:0;*/
z-index: 1;
width: 70%;
height: 70%;
}
#heart-container {
border-radius: 50%;
behavior: url(PIE.htc);
width: 220px;
height: 220px;
padding: 8px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 90px;
top: 0;
width: 90px;
height: 130px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
box-shadow: 10px 10px 100px #6d0019;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
Well, here is my attempt to satisfy the requirements of the question — which is not only about putting an image/element over another one, but about achieving that in a responsive manner.
Key points
Using a percentage value on bottom padding to make elements' heights respect their width1.
Using percentage values on top, right, left, bottom offsets as well as width and height properties2.
Using a high value in pixels on border-radius instead of percentage — for instance 1000px.
And number four... well, the last step is trial and error!
Example on JSFiddle.
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
margin: 0;
height: 100%;
width: 100%;
}
#logo {
width: 50%;
/* height: 50%; */
position: relative;
}
#logo:after {
content: "";
display: block;
padding-bottom: 70%;
}
#heart {
position: absolute;
top: 26%;
left: 35%;
z-index: 1;
width: 70%;
height: 100%;
}
#heart-container {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 70%;
/* height: 70%; */
border-radius: 50%;
behavior: url(PIE.htc);
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
#heart-container:after {
content: "";
display: block;
padding-bottom: 100%;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 0;
top: 0;
width: 39.130434782608695652173913043478%;
height: 56.521739130434782608695652173913%;
background: red;
-moz-border-radius: 1000px 1000px 0 0;
border-radius: 1000px 1000px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: -38.9%;
box-shadow: 10px 10px 100px #6d0019;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<div id="logo">
<div id="heart-container"></div>
<div id="heart"></div>
</div>
1 Have a look at Responsive Container section of this topic.
2 To find exact values, we can position/size things in an absolute length — like px — and then just measure things relative to each other.
If you want to go responsive, you'd have to drop all the fixed (pixel) units and use percentages unless you plan to have several versions depending on the screen size and in that case you can use media queries.
So, the idea is to use percentages for paddings, margins, etc... and I've replaced the fixed width/height definitions you had with percentual padding, which made the circle responsive. See if you can do the same for the heart (I think using an image might save you a lot of time here).
#logo {
width: 50%;
height: 50%;
position: relative;
}
#heart {
display: block;
position: absolute;
margin: 18% 14%;
z-index: 1;
width: 70%;
height: 70%;
}
#heart-container {
display: block;
position: absolute;
top: 0;
left: 0;
/*bottom:0;
right:0;*/
z-index: 1;
padding: 50%;
}
#heart-container {
border-radius: 50%;
behavior: url(PIE.htc);
padding: 50%;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 90px;
top: 0;
width: 90px;
height: 130px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
box-shadow: 10px 10px 100px #6d0019;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<div id="logo">
<div id="heart-container">
</div>
<div id="heart">
</div>
</div>
And the fiddle: http://jsfiddle.net/fzgd6cv8/
Let me know if you have trouble doing the same thing for the heart.
UPDATE
Here's my attempt for the heart, probably needs a bit of number tweaking:
#logo {
width: 50%;
height: 50%;
position: relative;
}
#heart {
display: block;
position: absolute;
margin: 20% 14% 0 9%;
z-index: 1;
width: 70%;
height: 70%;
}
#heart-container {
display: block;
position: absolute;
top: 0;
left: 0;
/*bottom:0;
right:0;*/
z-index: 1;
padding: 50%;
}
#heart-container {
border-radius: 50%;
behavior: url(PIE.htc);
padding: 50%;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 60%;
top: 0;
width: 60%;
padding-top: 100%;
background: red;
-moz-border-radius: 150% 150% 0 0;
border-radius: 150% 150% 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
box-shadow: 10px 10px 100px #6d0019;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<div id="logo">
<div id="heart-container">
</div>
<div id="heart"></div>
</div>
http://jsfiddle.net/fzgd6cv8/2/
How can I deactivate the top DIV so that I can select what's under it?
Check what I did here:
http://jsfiddle.net/zE5Ze/2/
#triangle_w {
width: 1000px;
height: 178px;
overflow: hidden;
position: fixed;
left: -24px;
top: -82px;
/*outline: 1px solid pink;*/
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
}
#triangle {
width: 961px;
height: 176px;
background: url('http://i.imgur.com/FTGa2.png') no-repeat;
position: absolute;
left: 10px;
bottom: -80px;
/*outline: 1px solid red;*/
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
}
#triangle #menu {
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
/*outline: 1px solid red;*/
}
Without the rotation: http://jsfiddle.net/zE5Ze/5/
As you can see, the areas inside the red outline are not selectable.
Is there a way to do this without having to fiddle with CSS rotations?
I'd like to deactivate the triangle, and leave only the menu and the thumbs active.
Simple. Give a z-index.
#triangle #menu a {z-index: 5;}
Fiddle: http://jsfiddle.net/zE5Ze/3/
Or set a width!
#triangle_w {width: 100px;}
Fiddle: http://jsfiddle.net/zE5Ze/4/