I've made a tag-like shape in HTML/CSS as can be seen here - http://jsfiddle.net/RuXyP/
.tag {
float: left;
text-align: center;
height: 14px;
width: 110px;
background-color: #2e353d;
color: #FFFFFF;
padding-top: 2px;
margin-top: 1px;
font-size: 10px;
}
.arrow-right {
width: 0;
height: 0;
float: left;
margin-top: 1px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #2e353d;
}
I'm attempting to add an outline to it and have got as far as this - http://jsfiddle.net/RuXyP/1/
However, I'm struggling to work out how to add an outline to the arrow bit.
I can't use a border as that's how the arrow is created
I can't use outline as it can't be specified for individual sides
Is there any way for this to be done?
I prefer to not use pseudo selectors for this, and instead just use two divs for the triangle, one 1px larger than the other, and you simply move the margin over on the second div. Like so:
.arrow-border {
width: 0;
height: 0;
float: left;
margin-top: 1px;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #FF00FF;
}
.arrow-right {
width: 0;
height: 0;
float: left;
margin-left: -9px; /* Width of .arrow-border's border */
margin-top: 2px;
border-top: 8px solid transparent; /* One less than .arrow-border's border width */
border-bottom: 8px solid transparent;
border-left: 8px solid #2e353d;
}
Demo: http://jsfiddle.net/RuXyP/4/
Nit: Keep in mind that if you put this in a container smaller than your arrow, it is possible that the arrow head will detach. Generally this shouldn't be a problem.
you could use a pseudo element and absolute position:
The idea is to stack both pseudo:before and after on top of eachother, and draw one that is 1pixel larger on each sides. Set the biggest underneath to draw the red border-color .
DEMO
.tag {
float: left;
position:relative;
text-align: center;
height: 14px;
width: 110px;
background-color: #2e353d;
color: #FFFFFF;
padding-top: 2px;
margin-top: 1px;
font-size: 10px;
border: 1px solid #FF00FF;
border-right: none;
}
.tag:after, .tag:before {
content:'';
margin-right:-10px;
width: 0;
height: 0;
position:absolute;
top:0px;
left:100%;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 8px solid #2e353d;
}
.tag:before {
top:-1px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 9px solid #FF00FF;
}
Related
I had this code to create a double border off different widths, but i need it to only show on the left,top and right sides. This is fine with the border property but not possible with outline as it doesn't share the same border-left etc
border: double 4px black;
outline: solid 3px black;
any help would be great
Why not remove the outline and instead create a nested element inside of the element?
You can do like this:
Create nested elements in HTML:
<div class="big">
<div class="small">Some text Here.....</div>
</div>
Then apply CSS:
.big{
border: 5px solid green;
border-bottom: none;
}
.small{
border: 2px solid black;
border-bottom: none;
margin: 2px;
}
No need to use the outline.
You can use box-shadow instead of outline - see demo below:
div {
line-height: 20px;
border-color: black;
border-style: double;
border-width: 4px 4px 0 4px;
box-shadow: -3px 0 0 0 black, /* left */
3px 0 0 0 black, /* right */
3px -3px 0 0 black, /* top */
-3px -3px 0 0 black; /* top */
}
<div> </div>
Create nested elements with their own id's
<div id="outer-border">
<div id="inner-border"></div>
</div>
Then set the correct CSS properties for those elements, for example something like:
#outer-border{border-bottom: none}
#inner-border{border-bottom: none}
Here is an idea using gradient to create the second border.
.box {
width: 200px;
height: 200px;
border: solid 2px red;
border-bottom:none;
padding:3px; /*control the distance between border*/
padding-bottom:0;
background:
linear-gradient(green,green) top /100% 4px,
linear-gradient(green,green) left /4px 100%,
linear-gradient(green,green) right/4px 100%;
background-repeat:no-repeat;
background-origin:content-box;
}
<div class="box">
</div>
Another idea using pseudo element:
.box {
width: 200px;
height: 200px;
border: solid 2px red;
border-bottom:none;
position:relative;
}
.box:before {
content:"";
position:absolute;
top:3px;
left:3px;
right:3px;
bottom:0;
border: solid 4px green;
border-bottom:none;
}
<div class="box">
</div>
.st1, .st2 {
background-color: yellow;
}
.st1 {
outline: solid 3px black;
width: 400px;
height: 200px;
position: relative;
}
.st2 {
border-left-color: black;
border-left-style: double;
border-left-width: 4px;
border-top-color: black;
border-top-style: double;
border-top-width: 4px;
border-right-color: black;
border-right-style: double;
border-right-width: 4px;
position: absolute;
left: -1px;
right: -1px;
top: -1px;
bottom: -3px;
}
<div class="st1"><div class="st2"></div></div>
or
.st1, .st2 {
background-color: yellow;
}
.st1 {
border: 3px solid black;
border-bottom: none;
width: 400px;
height: 200px;
position: relative;
box-sizing: border-box;
}
.st2 {
border: 1px solid black;
border-bottom: none;
margin-top: 2px;
margin-right: 2px;
margin-left: 2px;
margin-bottom: 0px;
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
<div class="st1"><div class="st2">test</div></div>
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 the following, where I am creating a triangle (that looks like it has a border) with css.
I want to create another triangle, exactly the same, but about 50px to the right of the 1st one.
How would you do these 2 :before's :after's ???
JSfiddle Here
HTML
<div class="section-modules">
<div class="my-account">
<div class="section-module-light">
<h3>Register Here</h3>
<p>It’s quick and easy and you’ll be the first to know about new bits we release.</p>Register Now
</div>
</div>
</div>
CSS
.section-module-light:after,
.section-module-light:before {
content: '';
position: absolute;
}
/* Styling block element */
.my-account .section-module-light {
position: relative;
margin-bottom: 2em;
padding: 1em;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background-color: transparent;
color: #444;
}
/* Stroke */
.my-account .section-module-light:before {
bottom: -0px;
left: 150px;
border-width: 36px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #ccc;
}
/* Fill */
.my-account .section-module-light:after {
bottom: -1px;
left: 150px;
border-width: 34px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid white;
}
JSfiddle Here
you do not need to create the triangle with separate stroke and fill, use css3 transform rotate. Then you can use before for one triangle and after for the second one.
display: block;
width: 34px;
height: 34px;
transform: rotate(45deg);
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
background: white;
see the whole code here: http://jsfiddle.net/07jfLdwL/
You can use CSS3 transform rotate properties. See documentations.
Please visit the 'jsfiddle' Code, where the output can be seen. When hover displays the menu text, the background of the text field is transpernt + and lower zindex. I haven't set any transparency or zindex to the menu.
I have tried every possible technique to get it resolved but no luck.
.control-menu {
float: left;
width: 50px;
background-color: #F0F0F0;
height: 380px;
border-right: 1px solid #e0e0e0;
z-index: 100;
}
.control-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.btn {
position: relative;
display: block;
text-decoration: none;
background-color: #e0e0e0;
padding: 15px 20px 10px 20px;
text-align: center;
margin: 0 0 1px 0;
border-right: 1px groove #f00;
text-shadow: #666666 1px 1px 1px;
}
.btn-name {
display: none;
border-top: 1px solid #f0f0f0;
padding-top: 16px !important;
}
.btn:hover .btn-name {
display:inline;
background-color: #e0e0e0;
width: 100px;
padding: 17px 20px 12px 0;
margin: 0 0 1px 0;
border-right: 1px groove #f00;
}
.btn.active {
background-color: #F0F0F0;
border-bottom: 1px solid #f00;
}
.btn.active:hover .btn-name {
background-color: #F0F0F0;
border-bottom: 1px solid #f00;
}
can someone please guide solution?
just add
z-index:200
to the .btn, didn't change any positioning fiddle
just add position: relative; and z-index: 1000;
.btn:hover .btn-name {
display: inline;
background-color: #e0e0e0 !important;
width: 100px;
padding: 17px 20px 12px 0;
margin: 0 0 1px 0;
border-right: 1px groove #f00;
position: relative;
z-index: 1000;
}
in the btn:hover .btn-name add position relative and z-index: 1
.btn:hover .btn-name {
/* add this */
position: relative;
z-index: 1;
/* you code */
display: inline;
background-color: #e0e0e0 !important;
width: 100px;
padding: 17px 20px 12px 0;
margin: 0 0 1px 0;
border-right: 1px groove #f00;
}
here the fix : jsfiddle
I have a little issue.
I need to get image like bellow but can't set arrow as I want but I think that I am close :)
http://jsfiddle.net/LDhLv/
.d:after {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: 95%;
left: 100px;
border-left: 10px solid #666;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-top: 0px solid transparent;
}
Try this:
CSS:
.d{border:1px solid #666; background: #fff; width:100px; height:50px; margin:60px;position:relative}
.d:before, .d:after{
content: "";
position:absolute;
width: 0;
height: 0;
}
.d:before {
top: -10px;
right: -1px;
border-bottom: 10px solid #666;
border-left: 10px solid transparent;
}
.d:after {
top: -8px;
right: 0px;
border-bottom: 10px solid #fff;
border-left: 10px solid transparent;
}
JSFiddle
I've tweaked the top/bottom left/right positioning for a more stable position, relative to the parent element. Also, I created the arrow in such a way that no rotation is necessary.
You need to use the right border and the rest is just position
.d:after {
content: "";
position:absolute;
width: 0;
height: 0;
bottom: 40px;
left:80px;
border-left: 10px solid transparent;
border-right: 10px solid #666;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
}
See modified JSFiddle
Change border-left: 10px solid #666 to border-left: 10px solid transparent.. and border-top: 0px solid transparent to border-top: 10px solid transparent.
To change shape of the triangle, set 0px on border-right or just remove it completely.
jsFiddle example
.d:after {
content: "\A";
position:absolute;
bottom: 50px;
left: 90px;
border-bottom: 10px solid #666;
border-left: 10px solid transparent;
border-top: 10px solid transparent;
}