I have a div with the shape of a hexagon and round corners, now, I would like to place to divs/input fields inside it.
CSS:
.hex {
position: relative;
margin: 1em auto;
width: 10em;
height: 17.32em;
border-radius: 1em/.5em;
background: orange;
transition: opacity .5s;
}
.hex:before,
.hex:after {
position: absolute;
width: inherit;
height: inherit;
border-radius: inherit;
background: inherit;
content: '';
}
.hex:before {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
.hex:after {
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
HTML:
<div class="hex">
// divs or inputs elements here
</div>
if I place something inside in the div it breaks the shape of hexagon.
P.S: if you have seen any login form which has a hexagon shape with round corners please send a link.
You can wrap the inner content in an element and make it absolute and then position it. So that the hexagon shape doesn't break.
.hex {
position: relative;
margin: 1em auto;
width: 10em;
height: 17.32em;
border-radius: 1em/.5em;
background: orange;
transition: opacity .5s;
}
.hex:before,
.hex:after {
position: absolute;
width: inherit;
height: inherit;
border-radius: inherit;
background: inherit;
content: '';
}
.hex:before {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
.hex:after {
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hex span {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
<div class="hex">
<span>// divs or inputs elements here</span>
</div>
Related
I'm trying to do some animation in a div with css rotate() but apparently it only works when I check the label, when I check again just show standard display.
Will be a bonus if someone help me to position the div that I use #rotator before, after vertical, this way they show 45ยบ to a div.
Example: https://codepen.io/rafaart/pen/dyNjgeb
.ativar-dark{
width: 50px;
height: 50px;
display: none;
}
#sky {
background-color: black;
position: absolute;
overflow: hidden;
}
#rotator {
position: relative;
width: 7rem;
height: 7rem;
transform: rotate(-45);
border-radius: 50%;
border: 2px solid red;
margin: 3rem;
}
label{
cursor: pointer;
}
#rotator:before, #rotator:after {
position: absolute;
content: '';
display: block;
height: 3rem;
width: 3rem;
border-radius: 50%;
animation: inherit;
animation-direction: reverse;
}
#rotator:before {
background-color: yellow;
top: -.25rem;
left: -.25rem;
}
#rotator:after {
background-color: White;
bottom: -.25rem;
right: -.25rem;
}
.ativar-dark:checked ~ .container div{
transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transition: all ease 2s;
}
<input type="checkbox" id="ativar-dark" class="ativar-dark">
<div class="container" id="sky">
<label for="ativar-dark">
<div id="rotator">
</div>
</label>
</div>
I have made few tweaks to the code. Kindly check whether it satisfies your requirement.
Your input type contains the id and class of the same name. You mentioned .ativar-dark in the CSS but when I changed it to #ativar-dark it was working fine which is bit strange because id and class can have the same name.
.ativar-dark{
width: 50px;
height: 50px;
display: none;
}
#sky {
background-color: black;
position: absolute;
overflow: hidden;
}
#rotator {
position: relative;
width: 7rem;
height: 7rem;
border-radius: 50%;
border: 2px solid red;
margin: 3rem;
transform: rotate(0deg); /*enter 0 deg in order to return back to the original position when unchecked */
transition: all ease 2s; /* This will make sure it provides the animated effect when unchecked */
}
label{
cursor: pointer;
}
#rotator:before, #rotator:after {
position: absolute;
content: '';
display: block;
height: 3rem;
width: 3rem;
border-radius: 50%;
animation: inherit;
animation-direction: reverse;
}
#rotator:before {
background-color: yellow;
top: 2rem; /* Move the position of circle to center position */
left: -1.25rem;
}
#rotator:after {
background-color: White;
bottom: 2rem; /* Move the position of circle to center position */
right: -1.25rem;
}
#ativar-dark:checked ~ .container div{
transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transition: all ease 2s;
}
<input type="checkbox" id="ativar-dark" class="ativar-dark">
<div class="container" id="sky">
<label for="ativar-dark">
<div id="rotator">
</div>
</label>
</div>
You can toggle two classes using javascript to achieve the rotation on the click of the rotation element. Start with one present in the HTML element, then toggle them on click.
let circle = document.getElementById('rotator')
circle.addEventListener('click', function(e) {
e.target.classList.toggle('rotate')
e.target.classList.toggle('reverse')
})
.ativar-dark {
width: 50px;
height: 50px;
display: none;
}
#sky {
background-color: black;
position: absolute;
overflow: hidden;
}
#rotator {
position: relative;
width: 7rem;
height: 7rem;
transform: rotate(-45);
border-radius: 50%;
border: 2px solid red;
margin: 3rem;
}
label {
cursor: pointer;
}
#rotator:before,
#rotator:after {
position: absolute;
content: '';
display: block;
height: 3rem;
width: 3rem;
border-radius: 50%;
animation: inherit;
animation-direction: reverse;
}
#rotator:before {
background-color: yellow;
top: -.25rem;
left: -.25rem;
}
#rotator:after {
background-color: White;
bottom: -.25rem;
right: -.25rem;
}
.rotate {
transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transition: all ease 2s;
}
.reverse {
transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transition: all ease 2s;
}
<input type="checkbox" id="ativar-dark" class="ativar-dark">
<div class="container" id="sky">
<label for="ativar-dark">
<div id="rotator" class="reverse">
</div>
</label>
</div>
Here's what I want to achieve:
slanted div:
HTML:
<span class="container">
<span class="element">some dummy text</span>
</span>
CSS:
.container .element {
font-size: 24px;
background-color: gray;
padding: 5px;
position: relative;
}
.container .element:before {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: gray;
transform-origin: bottom left;
-ms-transform: skew(-20deg, 0deg);
-webkit-transform: skew(-20deg, 0deg);
transform: skew(-20deg, 0deg);
}
.container .element:after {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: gray;
transform-origin: bottom left;
-ms-transform: skew(0deg, -1deg);
-webkit-transform: skew(0deg, -1deg);
transform: skew(0deg, -1deg);
}
https://jsfiddle.net/mktcany9/
I can't really make it like on the image, even though there is a lot of topics about similar divs.
This might help you.
The transform origin property allows the pseudo element to be skewed from the right bottom corner and the overflowing parts are hidden with overflow:hidden;.
div {
position: relative;
display: inline-block;
padding: 1em 5em 1em 1em;
overflow: hidden;
color: #fff;
}
div:after {
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skew(-45deg);
-ms-transform: skew(-45deg);
transform: skew(-45deg);
z-index: -1;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
}
body {
background: #fff;
}
<div>slanted div text</div>
<div>
slanted div text<br/> on several lines<br/> an other line
</div>
<div>wider slanted div text with more text inside</div>
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.
Please, try this in action. I change opacity on one element and this affects the look of another static element which contains text. It's hard to explain, just try and tell me how can I avoid this effect. It seems to me that this happens only when using chain of transforms.
http://jsfiddle.net/6p8jf3d3/
HTML:
<div class="outer">
<div class="inner"></div>
<div class="text">Hello</div>
</div>
CSS:
div.outer {
position: absolute;
top: 100px;
left: 50px;
width: 200px;
height: 100px;
border: 1px solid black;
-ms-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
div.inner {
width: 100%;
height: 100%;
background-color: #99CCFF;
opacity: 0;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
div.text {
position: absolute;
top: 0;
left: 0;
font-size: 2em;
font-weight: bold;
-ms-transform: skew(45deg);
-webkit-transform: skew(45deg);
transform: skew(45deg);
}
div.outer:hover div.inner {
opacity: 1;
}
Adding transform: translateZ(0); to div.inner will stop the hopping/jarring effect of the transition, but it keeps the stack fuzz on it. It's better, but not perfect:
Example Fiddle
So, I've experimented a bit (not with this jsfiddle but with larger example) and found solution for Chrome, Safari, Opera and Firefox. Combination of translateZ, backface-visibility and transform-style. jsfiddle.net/6p8jf3d3/4
CSS:
div.outer {
position: absolute;
top: 100px;
left: 50px;
width: 200px;
height: 100px;
border: 1px solid black;
-ms-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
div.inner {
width: 100%;
height: 100%;
background-color: #99CCFF;
opacity: 0;
-webkit-transition: all 0.5s;
transition: all 0.5s;
-ms-transform: translateZ(0);
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
div.text {
position: absolute;
top: 0;
left: 0;
font-size: 2em;
font-weight: bold;
-ms-transform: skew(45deg);
-webkit-transform: skew(45deg);
transform: skew(45deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
div.outer:hover div.inner {
opacity: 1;
}
I'm trying to achieve this shape in css, tried in several different ways, checked online for examples but looks like this shape is kind of tricky to accomplish.
Anyone that could have an idea of how to do this? Not sure if it's even possible with css only technique.
Thank you!
Yes, it is possible and it's very simple.
demo
Result:
:
I'm using just one element and a pseudo for the bottom left corner so the HTML is simply:
<div class='shape'></div>
Relevant CSS:
.shape {
overflow: hidden; /* to hide the top right corner
of the parallelogram formed by the pseudo */
position: relative;
width: 20em; height: 10em; /* any values really */
}
.shape:before {
position: absolute;
bottom: 0; left: 0;
width: 150%; height: 150%;
transform-origin: 0 100%;
transform: rotate(-3deg) skewX(-10deg);
background: black;
content: '';
}
You can get a lot of shapes using CSS transforms. And they are real shapes, you can have any kind of background behind.
I think it is perfect solution to your question...
#trapezoid {
height: 0;
width: 120px;
border-bottom: 80px solid #05ed08;
border-left: 45px solid transparent;
border-right: 5px solid transparent;
padding: 10 8px 5 5;
}
You could also use :before, :after pseudo and transform property. Here's an example.
#box {
width: 400px;
height: 200px;
background-color: #212121;
position: relative;
}
#box:after, #box:before {
display: block;
content: "\0020";
color: transparent;
width: 411px;
height: 45px;
background: white;
position: absolute;
bottom: -20px;
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
}
#box:before {
bottom: 80px;
left: -200px;
-moz-transform: rotate(92deg);
-webkit-transform: rotate(92deg);
-o-transform: rotate(92deg);
-ms-transform: rotate(92deg);
transform: rotate(92deg);
}
You may have to change some values to get the shape you want.