check this out
http://codepen.io/anon/pen/jfIil/
css code
.xyz {
margin: 50px;
width: 300px;
height: 300px;
background-color: #fff;
border-right: 1px solid #DEDEE0;
border-bottom: 1px solid #DEDEE0;
border-left: 1px solid #DEDEE0;
border-top: 3px solid #73A784;
}
you see the top-left and top-right corners ? why is it like this ? and how can I fix it ?
I'm talking about the the top border get "cutted" in the corners ...
thanks!!
.box {
width: 150px;
height: 150px;
margin: 20px auto;
border-color: red blue green yellow;
border-style: solid dashed dotted double;
border-width: 20px 10px 5px 15px;
}
This will set different widths, border-color and border-style for each of the four borders.
In addition, each of those properties can be broken down even further with border-left-style, border-top-width, border-bottom-color, and so on.
Checkout the fiddle here to understand better
.box {
width: 150px;
height: 150px;
margin: 20px auto;
border-color: red blue green yellow;
border-style: solid dashed dotted double;
border-width: 20px 10px 5px 15px;
}
Solution here
css
.xyz {
margin: 50px;
width: 300px;
height: 300px;
background-color: #fff;
border-left: 20px solid black;
border-right: 20px solid black;
box-shadow: 0px -20px 0 0 red;
height: 150px;
width: 150px;
}
Related
I'm trying to style the heading of a page with the CSS border property, using the following code:
h2 {
display: inline-block;
margin: 5px 0 5px 0;
padding: 0 0 0 5px;
background-color: #eee;
border-color: #aaa;
color: #000;
border-style: dotted dotted dotted solid;
border-width: 1px 1px 1px 5px;
}
The result is
,
which Is ok, but the left border has "pointy" tips, with gaps (what looks like a kind of "provision" for a, in this case, non-existent similar border), like in the image below
Is there a way to get "square" tips for the left border?
No you can't with a native border. But you can fake it using a :before element:
h2 {
position: relative; /* make title relative */
display: inline-block;
margin: 5px 0 5px 0;
padding: 0 0 0 5px;
background-color: #eee;
border-color: #aaa;
color: #000;
border-style: dotted dotted dotted solid;
border-width: 1px 1px 1px 5px;
}
h2:before {
content: "";
position: absolute;
height: calc(100% + 2px); /* 2px is the addition of the border-bottom (1px) and the border-top (1px) */
width: 5px; /* same size than the border-left */
background-color: #aaa;
left: -5px;
top: -1px; /* size of the border-top */
}
<h2>A title</h2>
I am drawing 2 bars, one at 70% and the other at 100%. what I want is to have a tiny triangle pointing at 70%.
I draw my triangle like this:
.arrowUp {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
}
The thing is if I give left and right margins as 70% and 30% the I expect it to align with the tip at the end of the bar. But I end up with something like this:
How can I get the tip of the triangle to point at the end of the black bar?
Set a negative left margin.
.arrowUp {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
margin-left: -10px;
}
.bar1{
width: 500px;
height: 10px;
background-color: gray;
}
.bar2{
position: relative;
width: 70%;
height: 10px;
background-color: red;
}
.arrowUp {
position: absolute;
top: 100%;
right: -10px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
}
<div class="bar1">
<div class="bar2">
<span class="arrowUp"></span>
</div>
</div>
I have created a div that looks like an arrow with css border.
.blue-arrow-right {
width: 0;
height: 0;
position: relative;
float: left;
margin-left: 0px;
margin-top: 5px;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #009de1;
}
Now i want to create an extra border on the right side of that div, lets say: 1px solid black
How can i do that?
hers is the fiddle: https://jsfiddle.net/wqehc9vv/4/
So it should look like this:
image preview
You can use a pseudo-element like :before for that. And make it slightly bigger than the div. Also position it accordingly. See below
.blue-arrow-right {
width: 0;
height: 0;
position: relative;
float: left;
margin-left: 0px;
margin-top: 5px;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #009de1;
}
.blue-arrow-right:before {
content:"";
position:absolute;
left:-30px;
top:-32px;
border-top: 32px solid transparent;
border-bottom: 32px solid transparent;
border-left: 32px solid black;
z-index:-1;
}
<div class="blue-arrow-right">
</div>
I'm trying to create a shape of a triangle cutting a square.
I tried using this code but it doesnt create the shape I want.
.square-cut{
font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid purple;
border-bottom: 20px solid purple;
border-right: 40px solid white;
}
<div class="square-cut"></div>
The shape I want is this:
How's this (comments in code):
/* make arrow as after pseudo element*/
.square-cut:after {
content: '';
display: block;
line-height: 0%;
font-size: 0px;
background: purple;
border-top: 20px solid purple;
border-bottom: 20px solid purple;
border-left: 40px solid white;
}
.square-cut {
box-sizing: border-box;
width: 50px; /* as arrow is 40px x 40px, this gives 10px under the tip*/
height: 50px;
padding: 5px 0; /* 5px on either side offat side of the arrow */
background: purple;
font-size: 0px;
}
<div class="square-cut"></div>
As shown below:
I want to draw a sector of a circle using borders only in order to make something like a chart, but if it's possible I don't want to use any plugins.
.circle {
background-color: transparent;
border: 4px solid #0c8a98;
border-radius: 100%;
height: 50px;
width: 50px;
}
<div class="circle"></div>
Do this. The border sides need to added individually.
.circle {
width: 50px;
height: 50px;
background-color: transparent;
border-top: none;
border-bottom: 4px solid #0c8a98;
border-left: 4px solid #0c8a98;
border-right: 4px solid #0c8a98;
border-radius: 100%;
}
<div class="circle"></div>