I am trying to add a border left to my selected buttons but there seems to be something odd happening I can't figure out.
You can see it in this JSFiddle.
The blue border on the left seems to have an odd 1px above it? It just doesnt sit perfectly square as i would have hoped.
HTML:
<div id="sidebarnav">
<br>
<div class="button-selected">Blog</div>
</div>
CSS:
#sidebarnav {
width:250px;
background-color:#202020;
height: 100%;
float:left;
position:fixed;
border-right: 1px solid #bbb;
}
.button-selected {
text-align:left;
width: 236;
padding-left: 10px;
padding-top: 6px;
padding-bottom: 6px;
background-color:#161616;
color: #fff;
border-top: 1px solid #0A0A0A;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.04) inset;
overflow:auto;
cursor: pointer;
border-left: 4px solid #3498db;
}
You could work around the corner seam issue by adding a pseudo-element that acts like a border. Something like the following:
.button-selected {
/* all of your original styling here */
position: relative; /* relative positioning required for position
absolute on pseudo element */
padding-left: 14px; /* 4px of padding added to compensate for
width of pseudo element */
}
.button-selected:after {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 4px; /* width of desired 'border' effect */
background: #3498db;
}
Updated example of your jsfiddle here.
Related
I am attempting to have a unique button shape that is achieved using pseudo-elements become transparent on one end so the background will show through. If the background is set to a solid color, the desired result is easily achieved because I can change the ::after element to be the same color. Though, I'm struggling to come up with a solution if the background is an image or svg.
codepen: https://codepen.io/codingforthefuture/pen/YzKvGvq
I have the ::after element set to white to demonstrate the problem, though you can change it to pink to see the desired result.
Problem occurs if you change the color of the pseudo-element to transparent, you see the other pseudo-element in its place. If you remove that pseudo-element you remove the border on that end for the shape.
body{
background: pink;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
a .btn-flag {
padding: 0;
border: 0;
outline: none;
text-decoration: none;
}
a.btn-flag strong{
position: relative;
color: black;
font-size: 0.8rem;
bottom: -2px;
right: 10px;
}
.btn-flag {
display: inline-block;
font-size: 0.7rem;
min-width: 200px;
height: 35px;
box-sizing: content-box;
padding-top: 15px;
position: relative;
background: yellow;
color: black;
font-size: 7px;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
border-top: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
margin-bottom: 20px;
}
.btn-flag::before,
.btn-flag::after {
content: "";
position: absolute;
top: -1px;
width: 0;
height: 0;
left: 87%;
/*should be transparent, Should acheive same effect as setting the color from #fff to pink but without knowing background set color, possible image or svg in background*/
border-right: 26px solid #fff;
border-top: 26px solid transparent;
border-bottom: 26px solid transparent;
}
.btn-flag::before{
/* other color to change, but changing gets rid of border on flag end */
border-right: 26px solid red;
border-top: 26px solid transparent;
border-bottom: 26px solid transparent;
left: 86.5%;
}
/****************************************************/
<body>
<a href="#" class="btn-flag">
<strong>Example Text</strong>
</a>
</body>
Try something like this! https://codepen.io/anonymousjoe/pen/wvwXJwz
Rather than trying to get pseudo elements to have crazy shapes and crazy borders, we can give each pseudo element the funny flag shape, and then fake the outlines on them using drop-shadows.
filter: drop-shadow(0 -1px 0 red) drop-shadow(1px 0 0 red);
Another option would be to use SVGs as background-images on each of the pseudo-elements positioned the same way I have them here.
.myButton {
float: right;
border-top: 40px solid pink;
border-left: 40px solid transparent;
border-right: 0px solid transparent;
width: 25%;
}
<div class="myButton">
Submit
</div>
The above is my code. As you can see I want to design a shape like the image below but I want the word Submit to be in the center but it is pushed down.
Anyone know a solution?
You can use linear-gradient background for this. Techique is based on setting fixed height and then applying padding equals height multiplied by √2:
.my-button {
border: 0;
height: 40px;
background: linear-gradient(45deg, transparent 40px, pink 40px);
padding-left: 56.5691px; /* 40 × √2 ≈ 56.5691 */
}
<button class="my-button">Submit</button>
Also you can achieve this via absolutely position pseudoelement:
.my-button {
background-color: pink;
position: relative;
height: 40px;
margin-left: 40px;
border: 0;
}
.my-button:after {
content: "";
position: absolute;
top: 0;
left: 0;
/* Move pseudoelement to the left to 100% of its width */
transform: translateX(-100%);
border-top: 40px solid pink;
border-left: 40px solid transparent;
border-right: 0px solid transparent;
}
<button class="my-button">Submit</button>
The issue with what you have is that you're using a top border instead of a background so your text naturally won't look to be in the center of your shape. What you can do is use positioning to manually move your text up within the shape:
.myButton {
float: right;
border-top: 40px solid pink;
border-left: 40px solid transparent;
border-right: 0px solid transparent;
width: 25%;
position: relative;
}
.inner {
position: absolute;
top: -30px;
left: 40px;
}
<div class="myButton">
<div class="inner">Submit</div>
</div>
How can I create a vertically tilted line using css, like seen below?
Try playing with border
.progressbar{
position: relative;
overflow: hidden;
height: 10px;
background: #eee;
}
.progressbar > i{
position: absolute;
width: 60%;
border-top: 10px solid #0bf; /* same as parent height */
border-right: 3px solid transparent; /* diagonality :) */
}
<div class="progressbar"><i></i></div>
So I've found this answer - CSS3 menu shape, style but have no idea on how to put it on the left side. I've searched for it already but with no luck.
This is what I'm trying to achieve:
And I've found this one also - Change the shape of the triangle. How can I make it work on the opposite side? I mean the arrow needs to be on the left side. And is it possible to do this with one div?
Want one that you can put over any background color?
jsBin demo
Only this HTML:
<span class="pricetag"></span>
And this CSS:
.pricetag{
white-space:nowrap;
position:relative;
margin:0 5px 0 10px;
displaY:inline-block;
height:25px;
border-radius: 0 5px 5px 0;
padding: 0 25px 0 15px;
background:#E8EDF0;
border: 0 solid #C7D2D4;
border-top-width:1px;
border-bottom-width:1px;
color:#999;
line-height:23px;
}
.pricetag:after{
position:absolute;
right:0;
margin:1px 7px;
font-weight:bold;
font-size:19px;
content:"\00D7";
}
.pricetag:before{
position:absolute;
content:"\25CF";
color:white;
text-shadow: 0 0 1px #333;
font-size:11px;
line-height:0px;
text-indent:12px;
left:-15px;
width: 1px;
height:0px;
border-right:14px solid #E8EDF0;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
}
which basically follows this principles: How to create a ribbon shape in CSS
If you want to add borders all around:
jsBin demo with transform: rotate(45deg) applied to the :before pseudo
.pricetag{
white-space:nowrap;
position:relative;
margin:0 5px 0 10px;
displaY:inline-block;
height:25px;
border-radius: 0 5px 5px 0;
padding: 0 25px 0 15px;
background:#E8EDF0;
border: 1px solid #C7D2D4;
color:#999;
line-height:23px;
}
.pricetag:after{
position:absolute;
right:0;
margin:1px 7px;
font-weight:bold;
font-size:19px;
content:"\00D7";
}
.pricetag:before{
position:absolute;
background:#E8EDF0;
content:"\25CF";
color:white;
text-shadow: 0 0 1px #aaa;
font-size:12px;
line-height:13px;
text-indent:6px;
top:3px;
left:-10px;
width: 18px;
height: 18px;
transform: rotate(45deg);
border-left:1px solid #C7D2D4;
border-bottom:1px solid #C7D2D4;
}
Since the example image in the question has extra outer borders, achieving it with the border trick will involve multiple (pseudo) elements and will become complex (because in addition to the arrow shape, a circle is also needed in front). Instead, the same could be achieved by using transform: rotate() like in the below sample.
The approach is pretty simple and as follows:
The parent div container houses the text that should be present within the price-tag shape.
The :after pseudo-element has transform: rotate(45deg) and produces the triangle shape. This is then positioned absolutely with respect to the left edge of the parent. The background set on the pseudo-element prevents the left border of the parent container from being visible.
The :before pseudo-element forms the circle present on the left side (using border-radius).
The X mark at the end is added using a span tag and the × entity.
The parent div container's width is set to auto so that it can expand based on the length of the text.
Note: This sample uses transforms, so will require polyfills in lower versions of IE.
div {
position: relative;
display: inline-block;
width: auto;
height: 20px;
margin: 20px;
padding-left: 15px;
background: #E8EDF2;
color: #888DA3;
line-height: 20px;
border-radius: 4px;
border: 1px solid #C7D2DB;
}
div:after,
div:before {
position: absolute;
content: '';
border: 1px solid #C7D2DB;
}
div:after { /* the arrow on left side positioned using left property */
height: 14px;
width: 14px;
transform: rotate(45deg);
background: #E8EDF2;
border-color: transparent transparent #C7D2DB #C7D2DB;
left: -6px;
top: 2px;
}
div:before { /* the circle on the left */
height: 4px;
width: 4px;
border-radius: 50%;
background-color: white;
left: 0px;
top: 7px;
z-index: 2;
}
.right { /* the x mark at the right */
text-align: right;
margin: 0px 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Home<span class='right'>×</span>
</div>
<div>Home Sweet Home<span class='right'>×</span>
</div>
<div>Hi<span class='right'>×</span>
</div>
Fiddle Demo
I wanted a simplified version of what was proposed here (without the hole effect and borders) but with the pointing side of it with rounded corner as well. So I came up with this solution. Visually this is what you get:
The HTML for it:
<div class="price-tag">Marketing</div>
<div class="price-tag">Sales</div>
<div class="price-tag">Inbound</div>
And the CSS for it:
.price-tag {
background: #058;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 0.875rem;
height: 30px;
line-height: 30px;
margin-right: 1rem;
padding: 0 0.666rem;
position: relative;
text-align: center;
}
.price-tag:after {
background: inherit;
border-radius: 4px;
display: block;
content: "";
height: 22px;
position: absolute;
right: -8px;
top: 4px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
width: 22px;
z-index: -1;
}
.price-tag:hover {
background: #07b;
}
original example
Modified: http://jsbin.com/ruxusobe/1/
Basically, it needs to float left, use border-right (instead of left) and modify the padding.
CSS:
.guideList{
font-size: 12px;
line-height: 12px;
font-weight: bold;
list-style-type: none;
margin-top: 10px;
width: 125px;
}
.guideList li{
padding: 5px 5px 5px 0px;
}
.guideList .active{
background-color: #0390d1;
color: white;
}
.guideList .activePointer{
margin-top: -5px;
margin-bottom: -5px;
float: left;
display: inline-block;
width: 0px;
height: 0px;
border-top: 11px solid white;
border-right: 11px solid transparent;
border-bottom: 11px solid white;
}
HTML:
<ul class="guideList">
<li><a>Consulting</a></li>
<li class="active"><span class="activePointer"></span>Law</li>
<li><a>Finance</a></li>
<li><a>Technology</a></li>
</ul>
Here is a simple example...
Orignal Version
Edited Version
CSS:
div {
margin-left: 15px;
background: #76a7dc;
border: 1px solid #CAD5E0;
padding: 4px;
width:50px;
position: relative;
}
div:after {
content:'';
display: block;
position: absolute;
top: 2px;
left: -1.3em;
width: 0;
height: 0;
border-color: transparent #76a7dc transparent transparent;
border-style: solid;
border-width: 10px;
}
Notice on border-color, only right is set with a color and everything else is set to transparent.
using pseudo element and a little bit playing with border you can achieve the exact thing. Check the DEMO.
HTML code is :
<a class="arrow" href="#">Continue Reading</a>
CSS Code is:
body{padding:15px;}
.arrow {
background: #8ec63f;
color: #fff;
display: inline-block;
height: 30px;
line-height: 30px;
padding: 0 12px;
position: relative;
border-radius: 4px;
border: 1px solid #8ec63f;
}
.arrow:before {
content: "";
height: 0;
position: absolute;
width: 0;
}
.arrow:before {
border-bottom: 15px solid transparent;
border-right: 15px solid #8ec63f;
border-top: 15px solid transparent;
left: -15px;
}
.arrow:hover {
background: #f7941d;
color: #fff;
border-radius: 4px;
border: 1px solid #f7941d;
}
.arrow:hover:before {
border-bottom: 15px solid transparent;
border-top: 15px solid transparent;;
border-right: 15px solid #f7941d;
}
I am trying to create a style using CSS and HTML. My desire style is something similar to this.
Most of things of that style have been done with pure CSS and HTML.
This is my CSS -
.filter-box {
float: left;
margin: 0 3% 0 2%;
width :29%;
> .main-cat {
background-color: #FFFFFF;
display: block;
margin-top: 25px;
padding: 10px;
position: relative;
> h3 {
margin: 0;
}
}
> .main-cat:after {
border-bottom: 15px solid rgba(0, 0, 0, 0);
border-left: 15px solid #FFFFFF;
border-top: 15px solid rgba(0, 0, 0, 0);
content: "";
height: 0;
margin-top: -15px;
position: absolute;
right: -14px;
top: 50%;
width: 0;
}
> .main-cat:first-child {
margin-top: 0;
}
> .sub-cat {
background: #FF9000;
margin-left: 25px;
margin-top: 5px;
padding: 8px 10px;
text-align: right;
> h4 {
margin: 0;
}
}
}
My problem is when I am trying to display a let border with a bold circle bullet on the left side of the sub category DIV.
Can any body tell me is this possible with pure CSS and HTML without using any image?
This is my code so far: JS BIN
Any comments would be greatly welcome.
Thank You.
Another possibilities would be to use background-image (gradients) and bullets of list-item , resized via font-size : DEMO
The CSS update could be :(see comment for explanation )
.filter-box {
background:linear-gradient(to right,
transparent 15px,
white 15px,
white 17px,
transparent 17px); /* draws the vertical bar aside list-items */
}
background:linear-gradient( /* draw orange background */
to right,
transparent 40px ,
#FF9000 40px),
linear-gradient(/* draw middle white bar */
to bottom,
transparent 49%,
white 48%,
white 52%,
transparent 51%
) right no-repeat;
background-size:
auto auto/* no need to resize first gradient */,
95% 100% /*reduce width of second gradient */;
display:list-item;/* lests get a round bullet if this is not a li */
color:white; /* give color to bullet */
font-size:2.2em;/* resize bullet */
list-style-position:inside;/* keep bullet inside element */
}
.filter-box > .sub-cat > h4 {
margin: 0;
font-size:0.6em;/* resize to a normal font-size from em value inherited */
display:inline-block;/* stands aside bullet */
text-align: right;/* align to right */
width:85%;/* keep min/max-width under control*/
}
Notice: no pseudo elements involved, gradient can be image for better compatibilitie and dispatch within main container , sub container and title for the background-color to increase compatibiliti with old browser.
As mentionned earlier , this menu/list deserve to be build from an HTML list.
Demo: http://jsfiddle.net/abhitalks/4LB5t/
CSS:
.sub-cat:before {
content: ' ';
border-left: 1px solid white;
display: inline-block;
width: 16px; height: 42px;
position: absolute;
left: 40px; margin: 0px; margin-top: -8px;
z-index: 10;
}
.sub-cat:after {
content: '';
display: inline-block;
width: 8px; height: 8px;
background-color: white;
border-radius: 50%;
position: absolute;
left: 36px; margin-top: -8px;
}
Update:
Demo 2: http://jsfiddle.net/abhitalks/4LB5t/1/
Just increase the height on .sub-cat:before.
Update 2:
Demo 3: http://jsfiddle.net/abhitalks/4LB5t/2/
Added your horizontal border as well. The only changes in the css are:
.sub-cat:before {
...
border-bottom: 1px solid white;
margin-top: -26px;
z-index: -1;
}
You have to tweak and tune the styles to achieve what you want. Hope that helps.
You can use the :before and :after elements in the sub-category to design the circle and left border.
Use the :before to make the circle as #megha outlined, and position it with the vertical center of the sub-cat.
Put the position of the .subcat as position: relative, so that you can define the positions of the absolutely positioned :before and :after in relation to the left edge of .subcat
Then use the :after and style it as
width: 2px;
height: 100%;
top: 0;
left: -10px
Hope this helps
Look at this pen. I have modified some of the styles in the answer to make it work. (SCSS syntax)
http://codepen.io/anon/pen/dJepq
.sub-cat {
background: #FF9000;
margin-left: 25px;
margin-top: 5px;
padding: 8px 10px;
text-align: right;
position: relative;
&:before {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ff9000;
content: "";
position: absolute;
top: 12px;
left: -20px;
}
&:after {
width: 2px;
top: -5px;
bottom: 0;
left: -16px;
content: "";
position: absolute;
background-color: #ff9000;
}
}
}
Using :after and :before pseudo element you can achieve the result.
Check the DEMO.
Here is the CSS would be required.
.sub-cat:before{
content: "";
position:absolute;
left:25px;
height: 10px;
width: 10px;
border-radius: 50%;
background:white;
margin-top: 5px;
}
.sub-cat:after{
content: "";
position:absolute;
top:55px;
left:29px;
height:21%;
border-right: 1px solid white;
}
.sub-cat h4:before{
content: " ";
position:absolute;
left:32px;
width: 10px;
height: 10px;
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
border-right: 1px solid white;}
.sub-cat h4:after{
content: " ";
margin-left:10px;
margin-top:4px;
position:absolute;
border-bottom: 8px solid rgba(0, 0, 0, 0);
border-left: 8px solid #000000;
border-top: 8px solid rgba(0, 0, 0, 0);
}
A circular bullet can be created using the html :
<div id="circle"></div>
and its corresponding css
#circle
{
width:10px;
height:10px;
border-radius:5px;
background-color:white;
}
I am unable to understand what "let border" means.Hope this helps!