Adding a tip to button when button active in HTML - javascript

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;
}

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>

up and down arrow onclick

I Have created HTML and css for a button where I need a up and down arrow toggle based on click. I am fine with the HTML and CSS however not so good with using jQuery for this. Could anyone start me off on this?
On click .js-custom-sleeve-option arrow should change up/down.
.js-custom-sleeve-option {
width: auto;
min-width: 3.8rem;
height: 3rem;
display: inline-block;
border: 1px solid #d1cac5;
background: #f7f7f7;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
text-align: center;
}
.js-arrow-down {
display: inline-block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid #233354;
position: relative;
left: 7px;
}
.js-arrow-up {
display: inline-block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 6px solid #233354;
position: relative;
left: 6px;
bottom: 12px;
}
<div>
<a class="js-custom-sleeve-option">
<span class="js-arrow-down"></span>
</a>
</div>
this will be something like this.. ofcourse you have to modify it according your needs
$(function(){
$(".js-custom-sleeve-option").on('click' , function(){
this.find('span').removeClass('js-arrow-down').end().addClass('js-arrow-up');
});
});
you could do with toggleClass() of jquery function
$('.js-custom-sleeve-option').click(function(){
$(this).children('span').toggleClass('js-arrow-down js-arrow-up')
})
.js-custom-sleeve-option {
width: auto;
min-width: 3.8rem;
height: 3rem;
display: inline-block;
border: 1px solid #d1cac5;
background: #f7f7f7;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
text-align: center;
}
.js-arrow-down {
display: inline-block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid #233354;
position: relative;
left: 7px;
}
.js-arrow-up {
display: inline-block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 6px solid #233354;
position: relative;
left: 6px;
bottom: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a class="js-custom-sleeve-option">
<span class="js-arrow-down"></span>
</a>
</div>

Create line built up animation with hexagon with css 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?

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>

Categories