I'm new to css transform styles. So I failed to figure out this matter. I've played with this code. But it have the corner on right side. But I need that corner shape in left side. Like this way. How can I create that? or any other methods for this kind of situations?
div {
float: left;
height: 100px;
width: 200px;
margin: 50px;
color: beige;
transition: all 1s;
}
.skew {
padding: 10px;
position: relative;
background: tomato;
}
.skew:after {
position: absolute;
content: '';
background: inherit;
z-index: -1;
}
.skew.bottom:after {
width: 100%;
height: 80%;
}
.skew.bottom:after {
bottom: 0px;
left: 0px;
transform-origin: top left;
transform: skewY(22deg);
}
.skew.bottom {
margin-top: 10px;
}
<div class="skew bottom">Some content</div>
div {
float: left;
height: 100px;
width: 200px;
margin: 50px;
color: beige;
transition: all 1s;
}
.skew {
padding: 10px;
position: relative;
background: tomato;
}
.skew:after {
position: absolute;
content: '';
background: inherit;
z-index: -1;
}
.skew.bottom:after {
width: 100%;
height: 80%;
}
.skew.bottom:after {
top: 0px; /*CHANGED THIS*/
left: 0px;
transform-origin: top left;
transform: skewY(-22deg);/*CHANGED THIS*/
}
.skew.bottom {
margin-top: 100px; /*INCREASED THIS*/
}
<div class="skew bottom">Some content</div>
Explanation
From bottom: 0px to top: 0px : So that the after element starts at the top left corner of it's parent which is the .skew element itself.
From 22deg to -22deg: To rotate the after element counter clockwise. Since the transform-origin is set to top left it will rotate in a way that the left top corner of the after element aligns with the left top corner of the .skew element.
From margin-top: 0px to margin-top: 100px: Because transforms do not change other elements around it or make space when a transformation takes some part of the element out of the view, it's necessary to have enough margin so that we can view the element after skewing it.
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 animate height property of an element using CSS but I want it from the center. Below is my code but it changes height from bottom.
.toggle {
position: absolute;
width: 400px;
height: 200px;
background: #ccc;
}
.left-border {
position: absolute;
top: 50px;
left: 10px;
width: 20px;
height: 60px;
border-radius: 200px;
background-color: #ff0000;
animation: height 2s;
}
#-webkit-keyframes height {
from {
height: 60px;
}
to {
height: 10px;
}
}
<div class="toggle">
<div class="left-border"></div>
</div>
Here is JSFIDDLE
You can use transform
from {
}
to {
transform: scaleY(0.1666);
}
0.1666 comes from 10px / 60px
Here you go. I use animation top instead of height. The red toggle also needs a 'container' now so I just used the one you had there. When changing the dimensions of the red toggle, change the outer wrapper, not the toggle element (it will fit to whatever the container is, both width and height wise)
https://jsfiddle.net/j2refncs/7/
.toggle {
width: 20px;
height: 40px;
background: #ccc;
position: relative;
.left-border {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 200px;
background-color: #ff0000;
animation: height 2s;
}
}
#-webkit-keyframes height {
from {
top: 0;
}
to {
top: 30px;
}
}
Just add top: 75px to the keyframe since the change in height is 50px. You want to reduce the height by 25px or half from both sides, top and bottom, to come to the desired 10px. So 50px / 2 + top: 50px = top: 75px:
.toggle {
position: absolute;
width: 400px;
height: 200px;
background: #ccc;
}
.left-border {
position: absolute;
top: 50px; /* starting position from the top */
left: 10px;
width: 20px;
height: 60px;
border-radius: 200px;
background-color: #f00;
animation: height 2s;
}
#-webkit-keyframes height {
to {height: 10px; top: 75px} /* + ending position from the top */
}
<div class="toggle">
<div class="left-border"></div>
</div>
You can animate the top with the height to make the height change appear from the center:
.toggle {
position: relative;
width: 400px;
height: 200px;
background: #ccc;
}
.left-border {
position: absolute;
top: 25px;
left: 10px;
width: 20px;
height: 60px;
border-radius: 200px;
background-color: #ff0000;
animation: height 2s forwards;
}
#keyframes height {
from {
top: 25px;
height: 60px;
}
to {
top: 50px;
height: 10px;
}
}
<div class="toggle">
<div class="left-border"></div>
</div>
You can also use transform: scaleY() in the animation. The default transform origin is the center.
.toggle {
position: relative;
width: 400px;
height: 200px;
background: #ccc;
}
.left-border {
position: absolute;
top: 25px;
left: 10px;
width: 20px;
height: 60px;
border-radius: 200px;
background-color: #ff0000;
animation: height 2s forwards;
}
#keyframes height {
from {
transform: scaleY(1);
}
to {
transform: scaleY(0.167);
}
}
<div class="toggle">
<div class="left-border"></div>
</div>
I am trying to create a button with two slanted lines. One from the bottom left to the right center which I managed. The next one needs to be from the top left to the right.
The height of the left side is 50px and the height of the right side should be 30px
.slantedButton {
position: relative;
box-sizing: border-box;
padding: 5px;
height: 30px;
background-color: #3c50a2;
line-height: 15px;
color: white;
width: 150px;
z-index: 1000;
}
.slantedButton:after {
position: absolute;
width: 100%;
height: 100%;
content: '';
z-index: -1;
background-color: inherit;
top: 0;
bottom: 0;
right: 0;
left: 0;
transform-origin: top right;
transform: skewY(-4deg);
}
<div class="slantedButton">Hello World!</div>
I tried to do this with a :before but this didn't work out.
Suggestions are very much appreciated.
Thanks very much.
It works find using ::before. Just change the transform-origin:
.slantedButton {
position: relative;
box-sizing: border-box;
padding: 5px;
height: 30px;
background-color: #3c50a2;
line-height: 15px;
color: white;
width: 150px;
margin: 30px;
z-index: 1;
}
.slantedButton:before, .slantedButton:after {
position: absolute;
width: 100%;
height: 100%;
content: '';
z-index: -1;
background-color: inherit;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.slantedButton:before {
transform-origin: top right;
transform: skewY(4deg);
}
.slantedButton:after {
transform-origin: top right;
transform: skewY(-4deg);
}
<div class="slantedButton">Hello World!</div>
Need help on how to put an arrow on each side of a box pointing outward.
I have the box and the basic CSS for an arrow I saw on another stack question.
Need help creating four arrows in that box
Im a java developer so this is not my cup of tea
Box:
#myBox {
width: 150px;
height: 150px;
background-color: grey;
border: 1px solid black;
}
/*Chevron*/
.Chevron {
position: relative;
display: block;
height: 50px;
/*height should be double border*/
}
.Chevron:before,
.Chevron:after {
position: absolute;
display: block;
content: "";
border: 25px solid transparent;
/*adjust size*/
}
/*Change four 'top' values below to rotate (top/right/bottom/left)*/
.Chevron:before {
top: 0;
border-top-color: #b00;
/*Chevron Color*/
}
.Chevron:after {
top: -50px;
/*adjust thickness*/
border-top-color: #fff;
/*Match background colour*/
}
<div id="myBox"></div>
<i class="Chevron"></i>
Since you are looking to interact with these shapes, you'd be better to go with a different approach to making your triangles, rather than a border hack.
.box {
height: 150px;
width: 150px;
background: lightgray;
position: relative;
}
.wrap {
position: absolute;
top: 0;
left: 25%;
height: 25%;
width: 50%;
overflow: hidden;
}
.touch {
position: absolute;
top: 0;
left: 50%;
height: 200%;
width: 200%;
transform: rotate(45deg);
transform-origin: top left;
background: gray;
cursor: pointer;
}
.wrap:nth-child(2) {
transform: rotate(90deg);
transform-origin: top left;
top: 25%;
left: 100%;
}
.wrap:nth-child(3) {
transform: rotate(180deg);
transform-origin: top left;
top: 100%;
left: 75%;
}
.wrap:nth-child(4) {
transform: rotate(-90deg);
transform-origin: top left;
top: 75%;
left: 0;
}
.touch:hover {
background: tomato;
}
<div class="box">
<span class="wrap"><span class="touch"></span></span>
<span class="wrap"><span class="touch"></span></span>
<span class="wrap"><span class="touch"></span></span>
<span class="wrap"><span class="touch"></span></span>
</div>
i have used the nth-child in order to position the arrows correctly. I have also needed to used a wrapper div like in this answer as the border-hack won't work on a hit-test.
Use Css triangle. Do you need something like this?
For each side, use the code below to make a triangle:
width: 0;
height: 0;
border-style: solid;
border-width: 100px 100px 100px 0;
border-color: transparent #007bff transparent transparent;
Here is a working demo.
I have managed to do this with 3 elements using CSS transforms and positioning. Is that what you were trying to achieve?
.container {
width: 100px;
height: 100px;
background: grey;
position: relative;
}
.container .triangles {
width: 70px;
height: 70px;
background: yellow;
transform: rotate(45deg);
position: absolute;
top: 15px;
left: 15px;
}
.container .triangles .box {
width: 50px;
height: 50px;
background: blue;
transform: rotate(-45deg);
position: absolute;
top: 10px;
left: 10px;
color: white;
}
<div class="container">
<div class="triangles">
<div class="box">
text
</div>
</div>
</div>
I have a div (fixed) which acts like a pop up:
<body>
<div class="popup-container">
<div class="popup-item">
Yolowing
</div>
</div>
</body>
This css allows the container to be horizontally centered (having a 100% width makes everything behind it unclickable; thus, I set it to 1px):
.popup-container {
position: fixed;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 1px;
z-index: 9999;
}
.popup-item {
display: block;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
}
However, I am unable to center .popup-item due to the parent element .popup-container being smaller than its child. How do I center .popup-item while still being able to click it (pointer-events: none entirely disabled it)?
Vote to Close almost has it, but with the 1px width, the element doesn't get centered.
Do this instead:
.popup-container {
position: fixed;
left: 0;
right: 0;
z-index: 9999;
text-align:center;
height:0px;
}
.popup-item {
display: inline-block;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
}
This will make it centered, because the container is 100% wide. However, pointer-events:none; will allow you to click through to anything below it.
A couple of solutions.
First, you can make the child of the container centered using translateX() transform: http://jsfiddle.net/Yjz5R/. The same effect can be accomplished using negative margins, but the width for the container's child has to be set: http://jsfiddle.net/9Qmza/.
CSS:
.popup-item {
position: absolute;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
Or second, you can make the container "immune" to click events:
Markup:
<input type = "checkbox" id = "clickToggle" />
<label for = "clickToggle">Click me</label>
<div class="popup-container">
<div class="popup-item">
Yolowing
</div>
</div>
Styles: http://jsfiddle.net/CVfHt/.
.popup-container {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(200, 200, 200, 0.5);
pointer-events: none;
}
.popup-item {
position: absolute;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
pointer-events: all;
}
input[type = "checkbox"] {
display: none;
}
input[type = "checkbox"] + label {
cursor: pointer;
}
input[type = "checkbox"]:checked ~ div {
display: none;
}
Lastly, a question/comment. If you do not want the container to be visible, then why use it at all? Just keep the markup of the child and get rid of the container: http://jsfiddle.net/yvc4E/.
.popup-container {
position: fixed;
left: 0;
right: 0;
margin-left: auto; /* remove this line - unnecessary*/
margin-right: auto; /* and this line, remove */
width: 1px;
z-index: 9999;
text-align: center; /* add this */
}
.popup-item {
display: inline-block; /* change to inline-block */
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
}