I have created a hexagon from 3 divs combined. I want to hover over the hexagon and all 3 divs to change colour.
<div class="hex" >
<div class="left" ></div>
<div class="middle" ></div>
<div class="right" ></div>
</div>
.hex {
float: left;
margin-right: -26px;
margin-bottom: -50px;
}
.hex .left {
float: left;
width: 0;
border-right: 60px solid #6C6;
border-top: 104px solid transparent;
border-bottom: 104px solid transparent;
}
.hex .left:hover {
border-right: 60px solid yellow;
}
.hex .middle {
float: left;
width: 124px;
height: 208px;
background: #6C6;
}
.hex .middle:hover {
background-color: yellow;
}
.hex .right {
float: left;
width: 0;
border-left: 60px solid #6C6;
border-top: 104px solid transparent;
border-bottom: 104px solid transparent;
}
.hex .right:hover {
border-left:60px solid yellow;
}
As you can see, at the moment I am only able to target each element of the hexagon but not the hexagon as a whole.
CSS can not associate and combine the :hover state of separated individual elements.
In this case, you can associate a :hover state to the whole .hex element in each selector. After a :hover, you can add more subselectors:
.hex:hover .left
(instead of .hex .left:hover)
The full code:
.hex {
float: left;
margin-right: -26px;
margin-bottom: -50px;
}
.hex .left {
float: left;
width: 0;
border-right: 60px solid #6C6;
border-top: 104px solid transparent;
border-bottom: 104px solid transparent;
}
.hex:hover .left {
border-right: 60px solid yellow; /* or simply: border-right-color: yellow; */
}
.hex .middle {
float: left;
width: 124px;
height: 208px;
background: #6C6;
}
.hex:hover .middle {
background-color: yellow;
}
.hex .right {
float: left;
width: 0;
border-left: 60px solid #6C6;
border-top: 104px solid transparent;
border-bottom: 104px solid transparent;
}
.hex:hover .right {
border-left: 60px solid yellow; /* or simply: border-left-color: yellow; */
}
<div class="hex">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
.hex:hover div { } maybe? I don't think that will work in some older version of IE though.
How about this:
.hex{transition:875ms ease all;}
.hex:hover div{
background:red;
}
You can use currentcolor
.hex {
float: left;
margin-right: -26px;
margin-bottom: -50px;
color:#6C6;
}
.hex .left {
float: left;
width: 0;
border-right: 60px solid currentcolor;
border-top: 104px solid transparent;
border-bottom: 104px solid transparent;
}
.hex .middle {
float: left;
width: 124px;
height: 208px;
background: currentcolor;
}
.hex .right {
float: left;
width: 0;
border-left: 60px solid currentcolor;
border-top: 104px solid transparent;
border-bottom: 104px solid transparent;
}
.hex:hover .right{
border-left-color:yellow;
}
.hex:hover .left{
border-right-color:yellow;
}
.hex:hover .middle{
color:yellow;
}
<div class="hex" >
<div class="left" ></div>
<div class="middle" ></div>
<div class="right" ></div>
</div>
or use pseudo elements
.hex {
width:125px;
height:208px;
position:relative;
background-color:#6C6;
margin:20px auto
}
.hex:before,.hex:after{
content:'';
position:absolute;
width: 0;
height:0
}
.hex:before {
left:-60px;
border-right: 60px solid #6C6;
border-top: 104px solid transparent;
border-bottom: 104px solid transparent;
}
.hex:after {
right:-60px;
border-left: 60px solid #6C6;
border-top: 104px solid transparent;
border-bottom: 104px solid transparent;
}
.hex:hover{
background-color:yellow;
}
.hex:hover:before{
color:yellow;
border-right-color:yellow;
}
.hex:hover:after{
border-left-color:yellow;
}
<div class="hex" ></div>
Related
I want to create a CSS animation in which two halves of a triangle split apart in go in opposite directions.
In order to achieve this I need to create a triangle, first. But more importantly the triangle needs to be in 2 halves which you can separately animate. I have searched far and wide on the web and found nothing! I cant believe no one has tried before. Hopefully you CSS wizards can help make this possible. (if you want you can add the animation too! its simple so I don't mind if you don't, thanks.)
Hover over the triangle to see the animation (splitting in halves):
*,
*:before,
*:after {
box-sizing: border-box;
}
body,
html {
width: 100%;
height: 100%;
}
body {
padding: 40px;
text-align: center;
}
.triangle {
display: inline-block;
margin: 0 5px;
vertical-align: middle;
position: absolute;
top: 0;
left:0;
transition: all 1s ease;
}
section {
position: relative;
cursor: pointer;
height: 100px;
}
.triangle-4 {
left:0;
transform: rotate(135deg);
width: 60px;
height: 60px;
border-bottom: solid 30px rgb(200,30,50);
border-left: solid 30px transparent; /**/
border-right: solid 30px transparent;
border-top: solid 30px transparent;
}
section:hover > .triangle-5 {
left: 50px;
}
section:hover > .triangle-4 {
left: -50px;
}
.triangle-5 {
transform: rotate(135deg);
width: 60px;
height: 60px;
border-bottom: solid 30px transparent;
border-left: solid 30px black;
border-right: solid 30px transparent;
border-top: solid 30px transparent;
}
<section>
<div class="triangle triangle-4"></div>
<div class="triangle triangle-5"></div>
</section>
References: Triangles
Isosceles Triangle:
*,
*:before,
*:after {
box-sizing: border-box;
}
body,
html {
width: 100%;
height: 100%;
}
body {
padding: 0 10px;
text-align: center;
}
section {
position: relative;
cursor: pointer;
height: 200px;
width: 100px;
}
.triangle {
display: inline-block;
margin: 0 5px;
vertical-align: middle;
position: absolute;
top: 0;
left:0;
transition: all 1s ease;
}
.triangle-4 {
left:30px;
width: 60px;
height: 60px;
border-bottom: solid 200px red;
border-left: solid 0px transparent;
border-right: solid 60px transparent;
border-top: solid 30px transparent;
}
section:hover > .triangle-5 {
left: -80px;
}
section:hover > .triangle-4 {
left: 80px;
}
.triangle-5 {
left:-30px;
width: 60px;
height: 60px;
border-bottom: solid 200px red;
border-right: solid 0px transparent;
border-left: solid 60px transparent;
border-top: solid 30px transparent;
}
<section>
<div class="triangle triangle-4"></div>
<div class="triangle triangle-5"></div>
</section>
I would like to create a navbar that looks like this: https://www.audacityteam.org/
I tried this but I think this doesn't look right. The border from the notch is on top of the left and right placeholders when it shouldn't be. Also I think I made this too complicated; can this be done with fewer div elements?
:root {
--background: black;
--accent: silver;
}
body {
margin: 0;
}
.placeholder {
float: left;
height: 20px;
width: 30%;
background: var(--background);
border-bottom: 3px solid var(--accent);
}
.right {
float: right;
}
.container {
position: absolute;
left: 25%;
border-top: 50px solid var(--background);
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 40%;
}
.container-accent {
position: absolute;
left: 24.8%;
border-top: 53px solid var(--accent);
border-left: 53px solid transparent;
border-right: 53px solid transparent;
height: 0;
width: 40%;
transform: scale(1.008, 1.008);
}
<div class="placeholder"></div>
<div class="placeholder right"></div>
<div class="container-accent"></div>
<div class="container"></div>
.step2 {
background-color: #f1f1f1;
color: #000;
margin: 0 -87px 0 33px;
padding: 30px 40px 0 40px;
height: 212px;
text-align: center;
}
.step2:before {
border-top: 40px solid transparent !important;
border-bottom: 40px solid transparent;
border-left: 40px solid #4060A5;
position: absolute;
right: -40px;
top: 0;
}
<div class="col-lg-3">
<div class="step2">
Step 1
</div>
</div>
I am developing a website but now I got stucked to achieve css for the Steps portion (Step 1, Step 2, Step 3) given in the image below :
This is the link for the image
Can anyone help me to achieve CSS ?
Play around with it and adjust the sizes and fonts according to your needs !
span{
position: absolute;
width : 100px;
margin-left: 30%;
margin-top: 40%;
}
.orange {
vertical-align: middle;
color: white;
position:relative;
background-color:#333;
height:100px !important;
width:100px !important;
z-index:3;
border-bottom-left-radius: 50%;
float: left;
margin-right:2px;
}
.orange:after {
content:'';
position: absolute;
left: 100%;
width: 0;
height: 0;
border-top: solid 50px transparent;
border-bottom: solid 50px transparent;
border-left: solid 15px #333;
}
.green {
color: white;
position:relative;
background-color: #333;
height:100px !important;
width:100px !important;
z-index:2;
margin-right:2px;
float: left;
}
.green:after {
content:'';
position: absolute;
left: 100%;
width: 0;
height: 0;
border-top: solid 50px transparent;
border-bottom: solid 50px transparent;
border-left: solid 15px #333;
}
.green:before {
content:'';
position: absolute;
width: 0;
height: 0;
border-top: solid 50px transparent;
border-bottom: solid 50px transparent;
border-left: solid 15px white;
}
.blue {
color: white;
position:relative;
background-color: #333;
height:100px !important;
width:100px !important;
border-top-right-radius: 50%;
float: left;
}
.blue:after {
content:'';
position: absolute;
top: 100%;
left: 100%;
margin-left: 250px;
width: 0;
height: 0;
}
.blue:before {
content:'';
position: absolute;
width: 0;
height: 0;
border-top: solid 50px transparent;
border-bottom: solid 50px transparent;
border-left: solid 15px white;
}
<div class="orange"><span>Step 1</span></div>
<div class="green"><span>Step 2</span></div>
<div class="blue"><span>Step 3</span></div>
For some reason there's space between my trapezoids.
#trapezoid {
margin-top: 100px;
border-bottom: 100px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0;
width: 200px;
transform:rotate(90deg);
float: left;
}
#trapezoid2 {
margin-top: 100px;
border-bottom: 100px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0;
width: 200px;
transform:rotate(-90deg);
float: left;
}
<div id="trapezoid2"></div>
<div id="trapezoid"></div>
Is there a way to remove the space without using negative margin?
Instead of making the trapezoid horizontally and then rotating, just make it the way you want it.
#trapezoid {
margin-top:20px;
border-left:100px solid red;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
height: 200px;
float: left;
}
#trapezoid2 {
margin-top:20px;
border-right:100px solid red;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
height: 200px;
float: left;
}
<div id="trapezoid2"></div>
<div id="trapezoid"></div>
It's because elements still keep it's DOM flow when you do transform:rotate(-90deg);. If you remove it, you will see that two divs actually touches. You can move second element to reduce gap.
#trapezoid {
margin-top: 100px;
border-bottom: 100px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0;
width: 200px;
transform: rotate(90deg);
float: left;
/* Added code */
position: relative;
right: 140px;
}
#trapezoid2 {
margin-top: 100px;
border-bottom: 100px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0;
width: 200px;
transform: rotate(-90deg);
float: left;
}
<div id="trapezoid2"></div>
<div id="trapezoid"></div>
Do it without the rotating:
#trapezoid {
border-left: 100px solid red;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
height: 200px;
width: 0px;
float: left;
}
#trapezoid2 {
border-right: 100px solid red;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
height: 200px;
width: 0px;
float: left;
}
http://codepen.io/anon/pen/Wxzdrv
That gap is there because of width and transform: rotate, but you can use translateY to fix it.
#trapezoid {
margin-top: 100px;
border-bottom: 100px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0;
width: 200px;
transform: rotate(90deg) translateY(70px);
float: left;
}
#trapezoid2 {
margin-top: 100px;
border-bottom: 100px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0;
width: 200px;
transform: rotate(-90deg) translateY(70px);
float: left;
}
<div id="trapezoid2"></div>
<div id="trapezoid"></div>
I have two divs with borders as the picture below shows.
How do I remove only the border where the 2 divs touch like the picture below shows?
Here is the html and css used in the top picture (js fiddle: http://jsfiddle.net/paulyoder/whsC4/19/)
<html>
<head>
<style type="text/css">
#sideBar {
float: left;
width: 75px;
height: 50px;
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black
}
#balanceSheetSummary {
float: left;
width: 150px;
height: 150px;
border: 1px solid black;
}
body { padding: 10px; }
h2 { margin: 5px; }
</style>
</head>
<body>
<div id="sideBar">
<h2>Side Bar</h2>
</div>
<div id="balanceSheetSummary">
<h2>Content</h2>
</div>
</body>
</html>
You could do something like this: http://jsfiddle.net/sj2AD/1/
#sideBar {
float: left;
width: 75px;
height: 50px;
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
background: red;
position: relative;
z-index: 2;
}
#balanceSheetSummary {
float: left;
width: 150px;
height: 150px;
border: 1px solid black;
background: red;
position: relative;
z-index: 1;
margin-left: -1px;
}
body {
padding: 10px;
}
h2 {
margin: 5px;
}
What I did was to add a negative margin to the right one so that the boxes overlap.
This does break, for example if the left div is higher than the right one.