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>
Related
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>
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;
}
It has been a long time since I built this triangle which points up. How can I alter my CSS to point the corner left?
http://jsfiddle.net/3sP8q/
.left-corner {
width: 0;
height: 0;
border-bottom: 15px solid #000;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
position: relative;
}
<div class="left-corner"></div>
Here is how:
.left-corner {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
<div class="left-corner"></div>
Use CSS-Tricks, it helps a lot!
What I am trying to do:
http://gyazo.com/e1bd6baee9730b61655c43bf05a071f7.png
Problem:
The black border won't work on the right side.
Picture:
http://gyazo.com/34b53980f862700b7444f433382b8b2c
<body class="container">
<div class="contentbody">
<div class="content">
</div>
</div>
</body>
.contentbody {
margin-top: 10;
border: solid 1px #000;
}
.content {
background: #232224;
width: 940px;
height: 500px;
border: solid 1px #373638;
}
What have I done wrong?
Considering if you use a border on a border, it should work as two borders..
Thanks.
http://jsfiddle.net/Lucak/
.contentbody {
display: inline-block;
margin-top: 10;
border: solid 1px #000;
}
.content {
background: #232224;
border: solid 1px #373638;
width: 940px;
height: 500px;
}
Use css3...
Example
<div id="box-shadow"></div>
#box-shadow {
width: 200px;
height: 75px;
background-color: orange;
border: blue solid 1px;
box-shadow: 1px 0px 10px 5px rgba(0,0,255,0.5);
-webkit-box-shadow: 1px 0px 10px 5px rgba(0,0,255,0.5);
}
Greetings.