Border on all sides of one sided-skewed div - javascript

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>

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 Slide an Element In and Out of a Div

I'm trying to get better at JS and CSS, so I'm making a fake iPhone and am trying the simulate the look of when a text bubble pops on and off screen.
This is what it looks like so far, and this is the HTML for the phone itself:
<div id="iPhone">
<div id="screen"></div>
<div id="me" class="bubble"></div>
<div id="homeButton" class="circle"></div>
</div>
As well as the style sheet:
#iPhone {
position: fixed;
width: 250px;
height: 500px;
background-color: black;
border-radius: 25px;
top: 50%;
right: 30%;
transform: translate(-50%, -50%);
-webkit-filter: blur(3px);
box-shadow: 0 0 40px 20px white;
border: solid 2px white;
}
#me {
background-color: #1D62F0;
margin-top: 130%;
margin-left: 25%;
}
#me::after{
content: "";
position: absolute;
right: 0em;
bottom: 0;
width: 0.5em;
height: 1em;
border-left: 0.5em solid #1D62F0;
border-bottom-left-radius: 1em 0.5em;
}
#screen {
position: fixed;
width: 241px;
height: 370px;
background-color: white;
border-radius: 0px;
top: 8%;
left: 1%;
-webkit-filter: blur(3px);
border: solid 2px black;
}
Right now, there's no JS governing it. How do I make it naturally slide onto the "screen" div and then disappear off the top, just like a real text message?
Thanks!
You need to put the overflow: hidden property on the message container div, then simply push new message boxes beneath the already existing ones, so they disappear eventually.

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