creating arrow representation on below tabs - javascript

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>

Related

How to override overflow property for parent but not for child element?

I am trying to override overflow property for my element with class .tags but keep it hidden for .tags .v (span element).
CSS:
.tags {
display: inline;
position: relative;
}
.tags:hover:after {
background: #333;
background: rgba(0, 0, 0, .8);
border-radius: 5px;
bottom: -34px;
color: #fff;
content: attr(data-gloss);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 150px;
}
.tags:hover:before {
border: solid;
border-color: #333 transparent;
border-width: 0 6px 6px 6px;
bottom: -4px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
td:has(.tags:hover) {
overflow: visible;
}
HTML:
<div class='tags' data-gloss='aaaaaaaaaaaaaa'><span class = 'v'>aaaaaaaaaaaaaa</span></div>
For now it works like this:
But I need value in column stay as before hovering and only tooltip must show full content.
How can I reach it with CSS?

4 Triangle in a box with image inside

I am in need of assistance creating something like the image above either in CSS / jQuery / SVG / Canvas
Each triangle will contain an image that needs to be cropped to fit the triangle and everything needs to be responsive.
I managed in doing this via CSS border but for my surprise I couldn't add an image to it.
Any kind of tips or info is greatly appreciated.
Example resulted via CSS:
<div class="middle_section" style="height: 900px;">
<div class="one_forth triangleMask for_1"></div>
<div class="one_forth triangleMask for_2"></div>
<div class="one_forth triangleMask for_3"></div>
<div class="one_forth triangleMask for_4"></div>
</div>
.middle_section .for_3,
.middle_section .for_1{
width: 100%;
height: 50%;
overflow: hidden;
}
.middle_section .for_2,
.middle_section .for_4{
width: 50%;
height: 100%;
overflow: hidden;
}
.middle_section .for_1:after {
width: 0;
height: 0;
border-style: solid;
border-width: 440px 808px 0px 808px;
border-color: #ff0000 transparent transparent transparent;
content: '';
position: absolute;
top:0;
left:10px;
}
.middle_section .for_2:after {
width: 0;
height: 0;
border-top: 440px solid transparent;
border-bottom: 440px solid transparent;
border-left: 808px solid lime;
content: '';
position: absolute;
top:10px;
}
.middle_section .for_3:after {
width: 0;
height: 0;
border-left: 808px solid transparent;
border-right: 808px solid transparent;
border-bottom: 440px solid #4679BD;
content: '';
position: absolute;
bottom:0;
left:10px;
}
.middle_section .for_4:after {
width: 0;
height: 0;
border-top: 440px solid transparent;
border-bottom: 440px solid transparent;
border-right: 808px solid pink;
content: '';
position: absolute;
top:10px;
right:0;
}
I made an example with CSS transform rotate:
.wrapper {
width:284px;
height:281px;
overflow: hidden;
position: relative;
}
.top {
transform: rotate(45deg);
position: absolute;
top:-100px;
left: 40px;
}
.bottom {
transform: rotate(45deg);
position: absolute;
bottom: -105px;
left: 40px;
}
.left {
transform: rotate(45deg);
position: absolute;
left: -102px;
top: 41px;
}
.right {
transform: rotate(45deg);
position: absolute;
right: -98px;
top: 41px;
}
<div class="wrapper">
<div class="top">
<img src="http://lorempixel.com/200/200/sports/1"/>
</div>
<div class="bottom">
<img src="http://lorempixel.com/200/200/sports/2"/>
</div>
<div class="left">
<img src="http://lorempixel.com/200/200/sports/3"/>
</div>
<div class="right">
<img src="http://lorempixel.com/200/200/sports/5"/>
</div>
</div>

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>

How to create a horse-shoe-like gauge using CSS

I am looking to draw a horse-shoe like gauge using CSS like the following picture below:
The way I've tried is doing something like creating a circle and cutting off the bottom like this fiddle: http://jsfiddle.net/Fz3Ln/12/
markup:
<div class="container">
<div class="horse-shoe-gauge"></div>
</div>
css:
.container {
width: 200px;
height: 180px;
overflow: hidden;
}
.horse-shoe-gauge {
width: 200px;
height: 200px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 10px solid black;
box-sizing: border-box;
}
But I'm not able to get the circular rounded bottom.
Any advice would be appreciated. Thanks.
I added an outer container and then absolutely position a couple extra pieces to get the rounded bottoms you were looking for.
HTML
<div class="outerContainer">
<div class="container">
<div class="horse-shoe-gauge"></div>
</div>
<div class="bottom left"></div>
<div class="bottom right"></div>
</div>
CSS
.outerContainer {
position: relative;
}
.container {
width: 200px;
height: 180px;
overflow: hidden;
}
.horse-shoe-gauge {
width: 200px;
height: 200px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 10px solid black;
box-sizing: border-box;
}
.bottom {
position: absolute;
width: 25px;
height: 10px;
border-radius: 8px;
background: #000;
}
.left {
bottom: -6px;
left: 38px;
-webkit-transform: rotate(32deg);
}
.right {
bottom: -6px;
left: 137px;
-webkit-transform: rotate(-32deg);
}
Here's a jsFiddle
Something a bit different with :before and :after so that the html doesn't need to be modified.
I would however probably consider using canvas instead as it will give more control.
http://jsfiddle.net/Fz3Ln/16/
.horse-shoe-gauge:before {
content: "";
display: block;
position: absolute;
bottom: -5px;
left: 12px;
height: 10px;
width: 10px;
border: 15px solid white;
border-top-color: transparent;
border-left-color: transparent;
background-color: black;
background-clip: padding-box;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.horse-shoe-gauge:after {
content: "";
display: block;
position: absolute;
bottom: -5px;
right: 12px;
height: 10px;
width: 10px;
border: 15px solid white;
border-top-color: transparent;
border-right-color: transparent;
background-color: black;
background-clip: padding-box;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
To see how it's working, see this fiddle.
Try this on for size:
http://codepen.io/robcampo/pen/YXpWLP
Should work from IE10+. It essentially rotates two divs beside each other and uses markers to round out the edges:
<div class="radial-wrapper">
<div class="radial-section radial-right-section">
<div class="wedge"></div>
</div>
<div class="radial-section radial-left-section">
<div class="wedge"></div>
</div>
<div class="marker start"></div>
<div class="marker end"></div>
</div>
It may be somewhat hard to read but it originates from this tutorial:
https://cssanimation.rocks/watch/
which goes through each step.

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