I am little stuck and need ur help, actually I am stuck in a problem I need to create an self pointing arrow to a rectangular box in css which I am unable to develop it Any help with example would be appreciated.
To understand the problem better I am attaching the desired output image.
I am also sharing my code what I have tried
body {
box-sizing: border-box;
margin: 10px;
}
.wrapper {
display: flex;
}
.container {
height: 200px;
width: 200px;
border: 1px solid black;
}
.container-2 {
margin-top: 4em;
height: 75px;
width: 75px;
border: 1px solid black;
}
<div class="wrapper">
<div class="container"></div>
<div class="container-2"></div>
</div>
You can give the second box a pseudo element and style it using clip-path to make a little arrow:
body {
box-sizing: border-box;
margin: 10px;
}
.wrapper {
display: flex;
}
.container {
height: 200px;
width: 200px;
border: 1px solid black;
}
.container-2 {
margin-top: 4em;
height: 75px;
width: 75px;
border: 1px solid black;
border-left-width: 0;
position: relative;
}
.container-2::after {
content: '';
display: block;
position: absolute;
background-color: black;
width: 10px;
height: 10px;
clip-path: polygon(100% 0, 80% 50%, 100% 100%, 0 50%);
bottom: 0;
left: 0;
transform: translateY(50%);
}
<div class="wrapper">
<div class="container"></div>
<div class="container-2"></div>
</div>
Perhaps this pseudo element ::after with a unicode arrow?
I additionally removed the left border
body {
box-sizing: border-box;
margin: 10px;
}
.wrapper {
display: flex;
}
.container {
height: 200px;
width: 200px;
border: 1px solid black;
}
.container-2 {
margin-top: 4em;
height: 75px;
width: 75px;
border: 1px solid black;
border-left:0;
}
.container-2::after {
content: "⮜";
position: absolute;
top: 140px;
}
<div class="wrapper">
<div class="container"></div>
<div class="container-2"></div>
</div>
Removed left border
Added pseudo element::before, could also be div with class arrow
Created triangle arrow
body {
box-sizing: border-box;
margin: 10px;
}
.wrapper {
display: flex;
}
.container {
height: 200px;
width: 200px;
border: 1px solid black;
}
.container-2 {
margin-top: 4em;
height: 75px;
width: 75px;
border: 1px solid black;
border-left: none;
position: relative;
}
.container-2:before {
content: '';
display: block;
width: 0;
height: 0;
border-top: 4px solid transparent;
border-right: 8px solid black;
border-bottom: 4px solid transparent;
position: absolute;
left: 0;
bottom: -4px;
}
<div class="wrapper">
<div class="container"></div>
<div class="container-2"></div>
</div>
Related
In a css/html element on a webpage I've made, if a user zooms in or out on their browser, artifacts emerge showing a line. Here is a code pen of the issue. Zoom in or out on your browser to see the red line at top emerge like below:
I've read that these problems can emerge because a browser can set the zoom to 1.5x, thus creating rounding issues for pixels. See slack post here. But I'm not sure what the appropriate fix should be. In my case I want the triangles at each end of my rectangle element which I create via css styling. Besides recreating the graphic via svg, is there any good tricks?
Here is the html/css in codepen:
#root {
display: block;
width: 100%;
height: 100%;
background-color: lightgrey;
padding: 24px;
max-width: 400px;
float: center;
position: relative;
}
#gridRoot {
display: flex;
flex-flow: column wrap;
top: 50%;
left: 50%;
align-content: center;
}
#LegendContainer {
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
width: 100%;
align-items: center;
justify-content: space-between;
}
#container {
background-color: grey;
postion: relative;
height: 120px;
justify-content: center;
left: calc(50% - 60px);
text-align: center;
top: calc(50% - 60px);
}
#circle {
transform: rotate(7.39deg);
}
#jss {
display: flex;
position: absolute;
background: red;
top: 40px;
width: 110px;
opacity: 80%;
height: 20px;
}
#jss::before {
left: 0;
width: 0;
bottom: 0;
height: 0;
content: '';
position: absolute;
transform: rotate(180deg);
border-top: 10px solid white;
border-left: 10px solid #00007f;
border-bottom: 10px solid white;
}
#jss::after {
right: 0;
width: 0;
bottom: 0;
height: 0;
content: '';
position: absolute;
border-top: 10px solid white;
border-left: 10px solid #7f0000;
border-bottom: 10px solid white;
}
<div id="root">
<div id="gridRoot">
<div id="LegendContainer">
<div id="container">
<div id="circle">
</div>
<div id="jss">
</div>
</div>
</div>
</div>
</div>
The ::before and ::after elements seemed to be causing the issue. Solution;
body {
margin: 0;
}
#container {
background-color: grey;
position: relative;
display: flex;
height: 120px;
justify-content: center;
text-align: center;
}
#jss {
display: flex;
position: absolute;
top: 40px;
width: 110px;
opacity: 80%;
height: 20px;
}
#jss-internal {
background: red;
width: 100%;
}
#jss-before {
content: '';
transform: rotate(180deg);
border-top: 10px solid white;
border-left: 10px solid #00007f;
border-bottom: 10px solid white;
}
#jss-after {
border-top: 10px solid white;
border-left: 10px solid #7f0000;
border-bottom: 10px solid white;
}
<div id="root">
<div id="LegendContainer">
<div id="container">
<div id="circle">
</div>
<div id="jss">
<div id="jss-before">
</div>
<div id="jss-internal">
</div>
<div id="jss-after">
</div>
</div>
</div>
</div>
</div>
I'm trying to achieve the border that looks like the image when on hover:
I'm not sure how to describe the border. But any ways to achieve this ?
.text {
width: 100px;
height: 20px;
text-align: center;
}
.text:hover {
border: 1px solid black;
}
<div class="text"> Sample </div>
Using hover with before and after
.text {
position: relative;
width: 100px;
height: 20px;
text-align: center;
}
.text:hover::before,
.text:hover::after {
content: '';
position: absolute;
border: 1px solid black;
border-bottom: 0;
width:100%;
left:0;
height: 20%;
}
.text:hover::after {
bottom: 0;
border: 1px solid black;
border-top: 0;
}
<div class="text"> Sample </div>
You can add ::before and ::after selectors with the same background of the div (here, by default, white) to overwrite the border as follows.
.text {
width: 100px;
height: 20px;
text-align: center;
position: relative;
}
.text:hover {
border: 1px solid black;
}
.text:hover::before,
.text:hover::after {
content: " ";
position: absolute;
background: white;
top: 5px;
height: 10px;
width: 1px;
}
.text::before {
left: -1px;
}
.text::after {
right: -1px;
}
<div class="text"> Sample </div>
A simple border-image can do the trick
.text {
display:inline-block;
padding:10px;
text-align: center;
font-size:25px;
border:2px solid transparent;
}
.text:hover {
border-image: linear-gradient(#000 30%, transparent 0 70%,#000 0) 2;
}
<div class="text"> Sample </div>
I want the border div to be "hidden" behind the circle and not cross through it. I thought z-index was the way to do things like this.
Any ideas?
JSFIDDLE: http://jsfiddle.net/qs5xmege/1/
CSS and HTML
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Give .circle a position:relative, z-index works only with position:relative, position:absolute or position: fixed
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
position: relative;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Add position:relative; to .circle.
z-index need relative, absolute or fixed vaue for position.
Set position:relative of div circle and z-index:2 ie. 1 more than border is enough
.circle {
background-color: #FFFFFF;
border: 3px solid #FF0000;
border-radius: 11px;
height: 22px;
margin: 30px auto 0;
position: relative;
width: 22px;
z-index: 2;
}
Snippet
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
background-color: #FFFFFF;
border: 3px solid #FF0000;
border-radius: 11px;
height: 22px;
margin: 30px auto 0;
position: relative;
width: 22px;
z-index: 2;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Try like this:
.circle {
background-color: #fff;
border: 3px solid red;
border-radius: 11px;
display: block;
height: 22px;
margin: 0 auto;
position: relative;
top: -68px;
width: 22px;
}
.border {
border-right: thin solid black;
height: 100px;
width: 50%;
}
I'm trying to figure out how to create a border image for separate divs in the screenshot, yet I can't seem to find a way to do so. Can anyone offer some guidance on how to make these outside border images work?
This is about as close as I can get it. No images required:
.has_tab {
border: 1px solid #e6e6e6;
border-left: none;
width: 33.33%;
height: 300px;
box-sizing: border-box;
display: block;
float: left;
position: relative;
text-align: center;
}
.has_tab:first-child {
border-left: 1px solid #e6e6e6;
}
/* the important bit... */
.has_tab:after {
content: "";
display: block;
width: 10px;
height: 100px;
background: #FFF;
border: 1px solid #e6e6e6;
border-left: none;
border-radius: 0 20px 20px 0;
position: absolute;
top: 50%;
margin-top: -50px;
right: -11px;
}
.has_tab:last-of-type:after {
display: none;
}
<div class="has_tab">Lorem ipsum</div>
<div class="has_tab">Lorem ipsum</div>
<div class="has_tab">Lorem ipsum</div>
Fiddle version
here is how i do it
first you need to cut this image
and then you can use it as background of after element
<div class="borderd-div"></div>
and the css:
.borderd-div{
height: 334px;
width:334px;
border: 1px solid #f1f1f1;
position: relative;
}
.borderd-div:after{
content:" ";
display: block;
position: absolute;
width: 20px;
height: 145px;
right:-19px;
top:83px;
background: url(Djyods1.png) no-repeat 0 0;
}
I am trying to add a responsive triangle piece to one of my divs (does not have to be IE8 compatible). I am struggling with making it responsive
http://jsfiddle.net/KzqB3/2/
CSS
.triangle {
width: 90%;
height: 0;
padding-left:10%;
padding-top: 10%;
overflow: hidden;
}
.triangle:after {
content: "";
position: absolute;
top: 66px;
display: block;
float: left;
width: 0;
height: 0;
left: 2%;
border-left: 275px solid transparent;
border-right: 275px solid transparent;
border-top: 50px solid #4679BD;
}
.content { width: 90%; background-color: #4679Bd; }
.content p { color: #fff; padding: 15px 0; }
HTML
<div class="content">
<p>Paragraph inside this div</p>
</div>
<div class="triangle"></div>
Fiddle Link
CSS
.triangle{
width: 56%;
height: 0;
padding-left: 45%;
padding-top: 45%;
overflow: hidden;
}
.triangle div {
width: 0;
height: 0;
margin-left:-500px;
margin-top:-500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-top: 500px solid #4679BD;
}
.content { width: 90%; background-color: #4679Bd; }
.content p { color: #fff; padding: 15px 0; margin: 0; }
HTML
<div class="content">
<p>Paragraph inside this div</p>
</div>
<div class="triangle"><div></div></div>