I am trying to create right arrow with gray border with css. but I think the arrow is over lapping the left rectangle. some finishing touch is required here:
.arrow_box {
position: relative;
background: #fff;
border: 2px solid #aaa;
width: 300px;
padding: 8px 20px 8px 40px;
}
.arrow_box:after,
.arrow_box:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-left-color: #fff;
border-width: 17px;
margin-top: -17px;
}
.arrow_box:before {
border-color: rgba(170, 170, 170, 0);
border-left-color: #aaa;
border-width: 19px;
margin-top: -19px;
}
<div class="arrow_box">Consumer Customer
</div>
You can add border on specific sides except right:
.arrow_box {
position: relative;
background: #fff;
border-left: 2px solid #aaa;
border-top: 2px solid #aaa;
border-bottom: 2px solid #aaa;
width: 300px;
padding: 8px 20px 8px 40px;
box-sizing: border-box;
}
https://jsfiddle.net/2ca4aucm/1/
Related
So I have to do tabs and I done them by creating triangles with pseudo-elements that were made with the help of borders and applied a filter: drop-shadow to them to show borders to border. In 100% zoom, everything is fine, but if you zooming out it, the borders with pseudo-elements disappers, and if you zooming in it, they collapse. What can you advise to solve this problem?
.tab {
display: flex;
font-size: 14px;
align-items: center;
position: relative;
margin-left: 40px;
height: 34px;
bottom: -6px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: #f0f0f0;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
}
.tab:before {
content: '';
left: -14px;
position: absolute;
border: 31px solid transparent;
border-bottom: 0px solid transparent;
border-right: 0px solid transparent;
border-left: 14px solid #f0f0f0;
bottom: 0;
filter: drop-shadow(1px 0px 0px black);
transform: rotateY(180deg);
transform-origin: bottom;
}
.tab:after {
content: '';
right: -14px;
position: absolute;
border: 31px solid transparent;
border-bottom: 0px solid transparent;
border-right: 0px solid transparent;
border-left: 14px solid #f0f0f0;
bottom: 0;
filter: drop-shadow(1px 0px 0px black);
}
<div class="tab"><a>tab1</a></div>
Link to fiddle: https://jsfiddle.net/Lkehqg0j/12
I have this callout cloud, please have a look at the code.
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 10px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
margin: 25px;
min-height: 100px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
width: 700px;
margin-top: -58px;
margin-left: 393px;
border-radius: 15px;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.right::before {
left: -20px;
top: 40%;
width: -10px;
margin-right: 10px;
border-right: 5px solid blue;
}
<div class="callout right"> </div>
I want to increase the size of the triangle (the blue one) at the start, I am unable to do that. please have a look and help me here.
You can increase the border width and adjust the location:
.callout.right::before {
left: -25px; /* adjust the location of triangle */
top: 40%;
margin-right: 10px;
border-right: 10px solid blue; /* increase the border width */
}
Here is the code snippet:
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 10px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
margin: 25px;
min-height: 100px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
width: 700px;
margin-top: -58px;
margin-left: 393px;
border-radius: 15px;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.right::before {
left: -25px;
top: 40%;
margin-right: 10px;
border-right: 10px solid blue;
}
<div class="callout right"> </div>
You can adjust the code like this and you can easily change the dimension of the triangle by only changing the width of the border:
div.callout {
background-color: #444;
background-image:linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 10px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
margin: 25px;
min-height: 100px;
border: 1px solid #333;
width: 200px;
border-radius: 15px;
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.right::before {
right:100%;
top: 50%;
transform:translateY(-50%);
border-right: 15px solid blue; /*Change only this value to control the size*/
}
<div class="callout right"> </div>
.wrapper-dropdown-3 {
width: 200px;
margin: 0 auto;
padding: 10px;
background: #fff;
border-radius: 7px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
cursor: pointer;
font-weight: bold;
color: #8AA8BD;
}
.wrapper-dropdown-3:after {
content: "";
width: 0;
height: 0;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #8aa8bd transparent;
}
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>Transport</span>
</div>
In the above code I want to insert the blue arrow to the middle right of the .wrapper-dropdown-3. As of now it is situated on the top right near the Transport span. I am not sure how I can move it to the very right middle? Any suggestions?
You can use absolute positioning against container:
.wrapper-dropdown-3 {
width: 200px;
margin: 0 auto;
padding: 10px;
background: #fff;
border-radius: 7px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
cursor: pointer;
font-weight: bold;
color: #8AA8BD;
position: relative;
}
.wrapper-dropdown-3:after {
content: "";
width: 0;
height: 0;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #8aa8bd transparent;
position: absolute;
right: 5px;
top: calc(50% + 6px / 2); /* 6px here is border-width value to compensate a fact that arrow is made from border */
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>Transport</span>
</div>
Simply use positionning like this :
.wrapper-dropdown-3 {
width: 200px;
margin: 0 auto;
padding: 10px;
background: #fff;
border-radius: 7px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
cursor: pointer;
font-weight: bold;
color: #8AA8BD;
/*Code added*/
position:relative;
/**/
}
.wrapper-dropdown-3:after {
/*Code added*/
position:absolute;
right:5px;
top:50%;
/**/
content: "";
width: 0;
height: 0;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #8aa8bd transparent;
}
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>Transport</span>
</div>
I have a div element that will display some message indicating a point on my page.
The arrow should be displayed on the left hand side of the div instead of bottom(currently).
Here is my HTML, CSS and fiddle code.
body {
font-family: Helvetica;
font-size: 13px;
}
div.callout {
height: 20px;
width: 130px;
/*float: left;*/
z-index: 1;
}
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 20px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
//margin: 25px;
min-height: 20px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.left::before {
left: 0%;
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
.callout.top::before {
left: 0%;
bottom: -20px;
border-top: 11px solid #444;
}
.callout.bottom::before {
left: 45%;
top: -20px;
border-bottom: 10px solid #444;
}
.callout.right::before {
top: 40%;
border-right: 10px solid #444;
}
.callout.top-left::before {
/*left: 7px;*/
bottom: -20px;
border-top: 10px solid #444;
}
.callout.top-right::before {
/*right: 7px;*/
bottom: -20px;
border-top: 10px solid #444;
}
<div class="callout top">test</div>
fiddle:- https://jsfiddle.net/5t6s6p5y/
Change CSS to code like:
.callout.top::before {
border-right: 11px solid #444;
bottom: 10px;
left: -20px;
}
Example:
body {
font-family: Helvetica;
font-size: 13px;
}
div.callout {
height: 20px;
width: 130px;
/*float: left;*/
z-index: 1;
}
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 20px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
//margin: 25px;
min-height: 20px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.left::before {
left: 0%;
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
.callout.top::before {
border-right: 11px solid #444;
bottom: 10px;
left: -20px;
}
.callout.bottom::before {
left: 45%;
top: -20px;
border-bottom: 10px solid #444;
}
.callout.right::before {
top: 40%;
border-right: 10px solid #444;
}
.callout.top-left::before {
/*left: 7px;*/
bottom: -20px;
border-top: 10px solid #444;
}
.callout.top-right::before {
/*right: 7px;*/
bottom: -20px;
border-top: 10px solid #444;
}
<div class="callout top">test</div>
Also on jFiddle.
You should probably use the class right instead of top, so as to not ruin reusability.
Also, your .callout.right class is missing a left positioning.
ie
.callout.right::before {
left: -20px;
top: 40%;
border-right: 10px solid #444;
}
see: https://jsfiddle.net/5t6s6p5y/2/
I've tried to set a black solid 1px border for triangle: jsFiddle. I write the follwoing markup:
<div>
</div>
and styles
div{
position: absolute;
left:0px;
top:0px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid red;
}
But I don't understand how to set the border for the triangle in this case.
You can try this too , basically i have made a larger triangle black in colour and put it behind the red one
<div id="border">
</div>
<div id="red">
</div>
#red{
position: absolute;
left:4px;
top:9px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid red;
background-color:transparent;
z-index: 99;
}
#border {
position: absolute;
left:0x;
top:0px;
width: 5px;
height: 10px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 12px solid black;
z-index: 0;
}
here is your solution its work
`div:before {
border-bottom: 12px solid #000000;
border-left: 6px solid rgba(0, 0, 0, 0);
border-right: 6px solid rgba(0, 0, 0, 0);
content: "";
height: 0;
left: -1px;
position: absolute;
top: -1px;
width: 0;
}
div:after {
border-bottom: 10px solid #FF0000;
border-left: 5px solid rgba(0, 0, 0, 0);
border-right: 5px solid rgba(0, 0, 0, 0);
content: "";
height: 0;
left: 0;
position: absolute;
top: 0;
width: 0;
z-index: 111111;
}`