Create line built up animation with hexagon with css javascript - javascript

I am trying to create a lines built up animation with hexagon element. I have tried the below for getting the hexagon element styling but with that i cant animate the lines in sequence after each other
#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
}
#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;
}
<div id="hexagon"></div>
Any ideas how i can achieve this type of animation with css javascript, jquery?

Related

How to move Top bar to left side in css?

I have this div that shows a top red bar. I've been trying to move this bar to the left side and make it look like a border left, but not having any luck. Does anyone know how to make it look like a border left using this code? Thanks in advance!
.container {
position: relative;
width: 100%;
padding: 18px;
margin-bottom: 16px;
border-radius: 8px;
border: solid 2px #e1e4e8;
overflow: hidden;
}
.container::after {
content: '';
position: absolute;
display: block;
height: 6px;
width: 100%;
top: 0;
left: 0;
background-color: red;
}
<div class = "container">this is a text</div>
This example adjusted position of ::after to make the red border appear on the left, hopefully close to the desired result.
.container {
position: relative;
width: 100%;
padding: 18px;
margin-bottom: 16px;
border-radius: 8px;
border: solid 2px #e1e4e8;
overflow: hidden;
}
.container::after {
content: '';
position: absolute;
display: block;
width: 6px;
inset: 0;
background-color: red;
}
<div class = "container">this is a text</div>
Perhaps just simplify it to a border?
.container {
position: relative;
width: 100%;
padding: 18px;
margin-bottom: 16px;
border-radius: 8px;
border: solid 2px #e1e4e8;
border-left: solid 8px red;
overflow: hidden;
}
<div class = "container">this is a text</div>
You can set border-left: 6px solid red; on the container class and remove background-color: red; from .container::after
Additionally, if you want to keep the grey border, just apply that style to each other sides of the container like so:
border-top: 2px solid #e1e4e8;
border-bottom: 2px solid #e1e4e8;
border-right: 2px solid #e1e4e8;
See snippet below:
.container {
position: absolute;
display: block;
width: 100%;
padding: 18px;
margin-bottom: 16px;
border-radius: 8px;
border-left: 6px solid red;
border-top: 2px solid #e1e4e8;
border-bottom: 2px solid #e1e4e8;
border-right: 2px solid #e1e4e8;
overflow: hidden;
}
.container::after {
content: '';
position: absolute;
display: block;
height: 6px;
width: 100%;
top: 0;
left: 0;
}
<div class = "container">this is a text</div>
You can also use a mixed border style and use hidden for the top, bottom, and right.
usage is described at W3Schools

creating arrow representation on below tabs

I'm trying to create the following structure on click of each button i want to show small triangle representation to the center of button on the top of container
but i has no idea to achieve this. it would be helpful for suggestions and help
.arrow_box {
position: relative;
border:2px solid green;
height:200px;
}
.arrow_box:after {
bottom: 100%;
left: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-bottom-color: black;
border-width: 15px;
margin-left: -15px;
}
<div>
<button>left</button>
<button>center</button>
<button>right</button>
<div class="arrow_box"></div>
</div>
Here I hacked some garbage together for you.
button {
position: relative;
}
button:focus:before{
border:2px solid green;
height:200px;
width: 300px;
content: "";
position: absolute;
top: 200%;
left: -20%;
border:2px solid green;
}
button:focus:after {
bottom: -100%;
left: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-bottom-color: black;
border-width: 15px;
margin-left: -15px;
}
<div>
<button>left</button>
<button>center</button>
<button>right</button>
<div class="arrow_box"></div>
</div>

How to stop elements resizing when I change the zoom on page

I'm a newbie to HTML and CSS, facing a problem where when I resize my page, the elements go berserk. I've tried everything from creating a main wrapper and adding max widths and heights, but all to no avail. Here is my code in CSS so that you can take a look.
body {
background-image: url(3eMAHaa.jpg)
}
div.header {
border: 1px solid black;
border-radius: 50px;
padding-top: 26%;
padding-bottom: 26%;
padding-left: 10%;
padding-right: 10%
}
h1 {
;
position: absolute;
top: 30%;
left: 40%;
color: #FF2B24;
font-family: helvetica
}
.someimage {
position: absolute;
top: 43%;
left: 32%
}
div.navbox {
border: 1px solid black;
border-radius: 50px;
padding-top: 70px;
padding-bottom: 70px;
padding-left: 500px;
padding-right: 500px;
position: absolute;
top: 1%;
right: 2%
}
img.about {
border: 1px solid gray;
position: absolute;
right: 80%;
top: 35%
}
}
img.location {
border: 1px solid gray;
position: absolute
}
img.contact {
border: 1px solid gray;
position: absolute;
right: 15%;
top: 35%
}
Remove your all padding code then it will not be resized
Never mind guys, figured it out. I had to set a a bigger DIV as a parent and then change all the other elements to relative positioning so they wouldn't move about. It was a hassle, but it worked! :). Also, try to use pixels instead of % as percentages aren't fixed values and will cause stuff to go crazy when you zoom.

Border on all sides of one sided-skewed div

I want to give a border on all sides to a one sided-skewed box, but I am unable to do so.
The css code written for this is
.block{
height: 400px;
width: 100%;
position: relative;
background: yellow;
height: 100px;
width: 100px;
border-top: 2px solid teal;
border-bottom: 2px solid teal;
border-left: 2px solid teal;
}
.block::after{
content: '';
width: 100%;
height: 100%;
position: absolute;
background: inherit;
z-index: -1;
top:0;
right:0;
transform-origin: right bottom ;
transform: skewX(-20deg);
border-right: 2px solid teal;
}
DEMO
Does anyone have a solution for this problem?
All you need to do is play around a bit more with the borders and positioning of the pseudo element. Something like this:
.block {
position: relative;
background: black;
height: 100px;
width: 100px;
border: 2px solid teal;
border-right: none;
}
.block::after{
content: '';
width: 100%;
height: 100%;
position: absolute;
background: inherit;
z-index: -1;
top: -2px;
right: -2px;
transform-origin: right bottom;
transform: skewX(-20deg);
border: 2px solid teal;
}
<div class="block"></div>

Adding a tip to button when button active in HTML

How add tip to second image when it is active. I have tried this example to display tip but i not helped my requirement.
Thanks.
Try this
HTML
<div id="pointed"> Arrow </div>
CSS
#pointed {
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background-color: black;color:white
}
#pointed::after {
position: absolute;
top: 100%;
left: 30%;
content: '';
width: 0;
height: 0;
border-top: solid 10px black;
border-left: solid 10px transparent;
border-right: solid 10px transparent;
}
DEMO
try this
<div id="pointed"> Arrow </div>
#pointed {
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background-color: black;color:white
}
#pointed:active::after {
position: absolute;
top: 100%;
left: 45%;
content: '';
width: 0;
height: 0;
border-top: solid 10px black;
border-left: solid 10px transparent;
border-right: solid 10px transparent;
}

Categories