I want to create a button with an x that is centred inside of a circle border. How can I centre the x vertically and horizontally inside of the circle?
I'm open to a different way of doing it than the code I have provided.
Any help is much appreciated, thank you
https://codepen.io/glittergirl/pen/xybOzL
#mdiv {
position: fixed;
right: 0;
top: 0;
margin: 20px;
border: 2px solid #000;
border-radius: 16px;
width: 34px;
height: 34px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.mdiv {
height:25px;
width:3px;
background-color: #000;
transform: rotate(45deg);
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-ms-transform: rotate(45deg); /* IE 9 */
Z-index:1;
}
.md {
height:25px;
width:3px;
background-color:#000;
-webkit-transform: rotate(90deg); /* Safari and Chrome */
-ms-transform: rotate(90deg); /* IE 9 */
transform: rotate(90deg);
Z-index:2;
}
You can use centering with left&top: 50% and transform: translate(-50%, -50%)
See this codepen for an example.
https://codepen.io/anon/pen/vVEKbV
Try this a simple and less code version.
.circle-button {
border-radius: 100%;
border: 3px solid #000;
display: inline-block;
padding: 20px 30px;
font-size: 50px;
}
.circle-button:after {
content: "\274c";
}
<div class="circle-button"></div>
Related
Ok, so everyone knows you can make a triangle using this:
#triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
And that produces a solid, filled in triangle. But how would you make a hollow-type arrow-like triangle, like this?
You can use the before or after pseudo-element and apply some CSS to it. There are various ways. You can add both before and after, and rotate and position each of them to form one of the bars. An easier solution is adding two borders to just the before element and rotate it using transform: rotate.
Scroll down for a different solution that uses an actual element instead of the pseuso elements
In this case, I've added the arrows as bullets in a list and used em sizes to make them size properly with the font of the list.
ul {
list-style: none;
}
ul.big {
list-style: none;
font-size: 300%
}
li::before {
position: relative;
/* top: 3pt; Uncomment this to lower the icons as requested in comments*/
content: "";
display: inline-block;
/* By using an em scale, the arrows will size with the font */
width: 0.4em;
height: 0.4em;
border-right: 0.2em solid black;
border-top: 0.2em solid black;
transform: rotate(45deg);
margin-right: 0.5em;
}
/* Change color */
li:hover {
color: red; /* For the text */
}
li:hover::before {
border-color: red; /* For the arrow (which is a border) */
}
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
<ul class="big">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
Of course you don't need to use before or after, you can apply the same trick to a normal element as well. For the list above it is convenient, because you don't need additional markup. But sometimes you may want (or need) the markup anyway. You can use a div or span for that, and I've even seen people even recycle the i element for 'icons'. So that markup could look like below. Whether using <i> for this is right is debatable, but you can use span for this as well to be on the safe side.
/* Default icon formatting */
i {
display: inline-block;
font-style: normal;
position: relative;
}
/* Additional formatting for arrow icon */
i.arrow {
/* top: 2pt; Uncomment this to lower the icons as requested in comments*/
width: 0.4em;
height: 0.4em;
border-right: 0.2em solid black;
border-top: 0.2em solid black;
transform: rotate(45deg);
}
And so you can have an <i class="arrow" title="arrow icon"></i> in your text.
This arrow is <i class="arrow" title="arrow icon"></i> used to be deliberately lowered slightly on request.
I removed that for the general public <i class="arrow" title="arrow icon"></i> but you can uncomment the line with 'top' <i class="arrow" title="arrow icon"></i> to restore that effect.
If you seek more inspiration, make sure to check out this awesome library of pure CSS icons by Nicolas Gallagher. :)
This can be solved much easier than the other suggestions.
Simply draw a square and apply a border property to just 2 joining sides.
Then rotate the square according to the direction you want the arrow to point, for exaple: transform: rotate(<your degree here>)
.triangle {
border-right: 10px solid;
border-bottom: 10px solid;
height: 30px;
width: 30px;
transform: rotate(-45deg);
}
<div class="triangle"></div>
Responsive Chevrons / arrows
they resize automatically with your text and are colored the same color. Plug and play :)
jsBin demo playground
body{
font-size: 25px; /* Change font and see the magic! */
color: #f07; /* Change color and see the magic! */
}
/* RESPONSIVE ARROWS */
[class^=arr-]{
border: solid currentColor;
border-width: 0 .2em .2em 0;
display: inline-block;
padding: .20em;
}
.arr-right {transform:rotate(-45deg);}
.arr-left {transform:rotate(135deg);}
.arr-up {transform:rotate(-135deg);}
.arr-down {transform:rotate(45deg);}
This is <i class="arr-right"></i> .arr-right<br>
This is <i class="arr-left"></i> .arr-left<br>
This is <i class="arr-up"></i> .arr-up<br>
This is <i class="arr-down"></i> .arr-down
Here's a different approach:
1) Use the multiplication character: × ×
2) Hide half of it with overflow:hidden
3) Then add a triangle as a pseudo element for the tip.
The advantage here is that no transforms are necessary. (It will work in IE8+)
FIDDLE
.arrow {
position: relative;
}
.arrow:before {
content: '×';
display: inline-block;
position: absolute;
font-size: 240px;
font-weight: bold;
font-family: verdana;
width: 103px;
height: 151px;
overflow: hidden;
line-height: 117px;
}
.arrow:after {
content: '';
display: inline-block;
position: absolute;
left: 101px;
top: 51px;
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 25px 24px;
border-color: transparent transparent transparent black;
}
<div class="arrow"></div>
Just use before and after Pseudo-elements - CSS
*{box-sizing: border-box; padding: 0; margin: 0}
:root{background: white; transition: background .3s ease-in-out}
:root:hover{background: red }
div{
margin: 20px auto;
width: 150px;
height: 150px;
position:relative
}
div:before, div:after{
content: '';
position: absolute;
width: 75px;
height: 20px;
background: black;
left: 40px
}
div:before{
top: 45px;
transform: rotateZ(45deg)
}
div:after{
bottom: 45px;
transform: rotateZ(-45deg)
}
<div/>
An other approach using borders and no CSS3 properties :
div, div:after{
border-width: 80px 0 80px 80px;
border-color: transparent transparent transparent #000;
border-style:solid;
position:relative;
}
div:after{
content:'';
position:absolute;
left:-115px; top:-80px;
border-left-color:#fff;
}
<div></div>
> itself is very wonderful arrow! Just prepend a div with it and style it.
div{
font-size:50px;
}
div::before{
content:">";
font: 50px 'Consolas';
font-weight:900;
}
<div class="arrowed">Hatz!</div>
Left Right Arrow with hover effect using Roko C. Buljan box-shadow trick
.arr {
display: inline-block;
padding: 1.2em;
box-shadow: 8px 8px 0 2px #777 inset;
}
.arr.left {
transform: rotate(-45deg);
}
.arr.right {
transform: rotate(135deg);
}
.arr:hover {
box-shadow: 8px 8px 0 2px #000 inset
}
<div class="arr left"></div>
<div class="arr right"></div>
I needed to change an input to an arrow in my project. Below is final work.
#in_submit {
background-color: white;
border-left: #B4C8E9;
border-top: #B4C8E9;
border-right: 3px solid black;
border-bottom: 3px solid black;
width: 15px;
height: 15px;
transform: rotate(-45deg);
margin-top: 4px;
margin-left: 4px;
position: absolute;
cursor: pointer;
}
<input id="in_submit" type="button" class="convert_btn">
Here Fiddle
.arrow {
display : inline-block;
font-size: 10px; /* adjust size */
line-height: 1em; /* adjust vertical positioning */
border: 3px solid #000000;
border-left: transparent;
border-bottom: transparent;
width: 1em; /* use font-size to change overall size */
height: 1em; /* use font-size to change overall size */
}
.arrow:before {
content: "\00a0"; /* needed to hook line-height to "something" */
}
.arrow.left {
margin-left: 0.5em;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-o-transform: rotate(225deg);
-ms-transform: rotate(225deg);
transform: rotate(225deg);
}
.arrow.right {
margin-right: 0.5em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.arrow.top {
line-height: 0.5em; /* use this to adjust vertical positioning */
margin-left: 0.5em;
margin-right: 0.5em;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.arrow.bottom {
line-height: 2em;
/* use this to adjust vertical positioning */
margin-left: 0.5em;
margin-right: 0.5em;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}
<div>
here are some arrows
<div class='arrow left'></div> space
<div class='arrow right'></div> space
<div class='arrow top'></div> space
<div class='arrow bottom'></div> space with proper spacing?
</div>
Similar to Roko C, but a little more control over size and placement.
This question already has answers here:
Responsive CSS triangle with percents width
(7 answers)
Closed 8 years ago.
I need to create grid with a down arrow. See the image below:
The problem is that the div has a variable width because of .col-xs-3. How can I give the arrow (:after element) the appropriate width so that it will still be responsive?
My CSS:
.grid-arrow::after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 47px solid transparent;
border-bottom: 47px solid transparent;
border-left: 40px solid rgb(173, 173, 173);
position: absolute;
/* top: 50%; */
margin-top: -37px;
/* margin-left: 1px; */
left: 50%;
z-index: 3;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
My HTML:
<div class="col-xs-3 advantage grid-arrow">
<div>
Some text
</div>
</div>
As pointed out by #ochi, there is already a solution that might work for you.
Bringing it back to your code, it would be something like this:
HTML:
<div class="col-xs-3 advantage grid-arrow">
<div>
Some text.
</div>
</div>
CSS:
.grid-arrow {
position: relative;
text-align: center;
background-color: red;
line-height: 2em;
border-top:300px solid #fff;
top:-300px;
}
.grid-arrow::after {
content: "";
position: absolute;
left: 0;
background-color: red;
padding-bottom: 50%;
width:57.7%;
z-index:-1;
-webkit-transform-origin:0 0;
-ms-transform-origin:0 0;
transform-origin:0 0;
-webkit-transform: rotate(-30deg) skewX(30deg);;
-ms-transform: rotate(-30deg) skewX(30deg);
transform: rotate(-30deg) skewX(30deg);
}
See JsFiddle.
Ok, so everyone knows you can make a triangle using this:
#triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
And that produces a solid, filled in triangle. But how would you make a hollow-type arrow-like triangle, like this?
You can use the before or after pseudo-element and apply some CSS to it. There are various ways. You can add both before and after, and rotate and position each of them to form one of the bars. An easier solution is adding two borders to just the before element and rotate it using transform: rotate.
Scroll down for a different solution that uses an actual element instead of the pseuso elements
In this case, I've added the arrows as bullets in a list and used em sizes to make them size properly with the font of the list.
ul {
list-style: none;
}
ul.big {
list-style: none;
font-size: 300%
}
li::before {
position: relative;
/* top: 3pt; Uncomment this to lower the icons as requested in comments*/
content: "";
display: inline-block;
/* By using an em scale, the arrows will size with the font */
width: 0.4em;
height: 0.4em;
border-right: 0.2em solid black;
border-top: 0.2em solid black;
transform: rotate(45deg);
margin-right: 0.5em;
}
/* Change color */
li:hover {
color: red; /* For the text */
}
li:hover::before {
border-color: red; /* For the arrow (which is a border) */
}
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
<ul class="big">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
Of course you don't need to use before or after, you can apply the same trick to a normal element as well. For the list above it is convenient, because you don't need additional markup. But sometimes you may want (or need) the markup anyway. You can use a div or span for that, and I've even seen people even recycle the i element for 'icons'. So that markup could look like below. Whether using <i> for this is right is debatable, but you can use span for this as well to be on the safe side.
/* Default icon formatting */
i {
display: inline-block;
font-style: normal;
position: relative;
}
/* Additional formatting for arrow icon */
i.arrow {
/* top: 2pt; Uncomment this to lower the icons as requested in comments*/
width: 0.4em;
height: 0.4em;
border-right: 0.2em solid black;
border-top: 0.2em solid black;
transform: rotate(45deg);
}
And so you can have an <i class="arrow" title="arrow icon"></i> in your text.
This arrow is <i class="arrow" title="arrow icon"></i> used to be deliberately lowered slightly on request.
I removed that for the general public <i class="arrow" title="arrow icon"></i> but you can uncomment the line with 'top' <i class="arrow" title="arrow icon"></i> to restore that effect.
If you seek more inspiration, make sure to check out this awesome library of pure CSS icons by Nicolas Gallagher. :)
This can be solved much easier than the other suggestions.
Simply draw a square and apply a border property to just 2 joining sides.
Then rotate the square according to the direction you want the arrow to point, for exaple: transform: rotate(<your degree here>)
.triangle {
border-right: 10px solid;
border-bottom: 10px solid;
height: 30px;
width: 30px;
transform: rotate(-45deg);
}
<div class="triangle"></div>
Responsive Chevrons / arrows
they resize automatically with your text and are colored the same color. Plug and play :)
jsBin demo playground
body{
font-size: 25px; /* Change font and see the magic! */
color: #f07; /* Change color and see the magic! */
}
/* RESPONSIVE ARROWS */
[class^=arr-]{
border: solid currentColor;
border-width: 0 .2em .2em 0;
display: inline-block;
padding: .20em;
}
.arr-right {transform:rotate(-45deg);}
.arr-left {transform:rotate(135deg);}
.arr-up {transform:rotate(-135deg);}
.arr-down {transform:rotate(45deg);}
This is <i class="arr-right"></i> .arr-right<br>
This is <i class="arr-left"></i> .arr-left<br>
This is <i class="arr-up"></i> .arr-up<br>
This is <i class="arr-down"></i> .arr-down
Here's a different approach:
1) Use the multiplication character: × ×
2) Hide half of it with overflow:hidden
3) Then add a triangle as a pseudo element for the tip.
The advantage here is that no transforms are necessary. (It will work in IE8+)
FIDDLE
.arrow {
position: relative;
}
.arrow:before {
content: '×';
display: inline-block;
position: absolute;
font-size: 240px;
font-weight: bold;
font-family: verdana;
width: 103px;
height: 151px;
overflow: hidden;
line-height: 117px;
}
.arrow:after {
content: '';
display: inline-block;
position: absolute;
left: 101px;
top: 51px;
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 25px 24px;
border-color: transparent transparent transparent black;
}
<div class="arrow"></div>
Just use before and after Pseudo-elements - CSS
*{box-sizing: border-box; padding: 0; margin: 0}
:root{background: white; transition: background .3s ease-in-out}
:root:hover{background: red }
div{
margin: 20px auto;
width: 150px;
height: 150px;
position:relative
}
div:before, div:after{
content: '';
position: absolute;
width: 75px;
height: 20px;
background: black;
left: 40px
}
div:before{
top: 45px;
transform: rotateZ(45deg)
}
div:after{
bottom: 45px;
transform: rotateZ(-45deg)
}
<div/>
An other approach using borders and no CSS3 properties :
div, div:after{
border-width: 80px 0 80px 80px;
border-color: transparent transparent transparent #000;
border-style:solid;
position:relative;
}
div:after{
content:'';
position:absolute;
left:-115px; top:-80px;
border-left-color:#fff;
}
<div></div>
> itself is very wonderful arrow! Just prepend a div with it and style it.
div{
font-size:50px;
}
div::before{
content:">";
font: 50px 'Consolas';
font-weight:900;
}
<div class="arrowed">Hatz!</div>
Left Right Arrow with hover effect using Roko C. Buljan box-shadow trick
.arr {
display: inline-block;
padding: 1.2em;
box-shadow: 8px 8px 0 2px #777 inset;
}
.arr.left {
transform: rotate(-45deg);
}
.arr.right {
transform: rotate(135deg);
}
.arr:hover {
box-shadow: 8px 8px 0 2px #000 inset
}
<div class="arr left"></div>
<div class="arr right"></div>
I needed to change an input to an arrow in my project. Below is final work.
#in_submit {
background-color: white;
border-left: #B4C8E9;
border-top: #B4C8E9;
border-right: 3px solid black;
border-bottom: 3px solid black;
width: 15px;
height: 15px;
transform: rotate(-45deg);
margin-top: 4px;
margin-left: 4px;
position: absolute;
cursor: pointer;
}
<input id="in_submit" type="button" class="convert_btn">
Here Fiddle
.arrow {
display : inline-block;
font-size: 10px; /* adjust size */
line-height: 1em; /* adjust vertical positioning */
border: 3px solid #000000;
border-left: transparent;
border-bottom: transparent;
width: 1em; /* use font-size to change overall size */
height: 1em; /* use font-size to change overall size */
}
.arrow:before {
content: "\00a0"; /* needed to hook line-height to "something" */
}
.arrow.left {
margin-left: 0.5em;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-o-transform: rotate(225deg);
-ms-transform: rotate(225deg);
transform: rotate(225deg);
}
.arrow.right {
margin-right: 0.5em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.arrow.top {
line-height: 0.5em; /* use this to adjust vertical positioning */
margin-left: 0.5em;
margin-right: 0.5em;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.arrow.bottom {
line-height: 2em;
/* use this to adjust vertical positioning */
margin-left: 0.5em;
margin-right: 0.5em;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}
<div>
here are some arrows
<div class='arrow left'></div> space
<div class='arrow right'></div> space
<div class='arrow top'></div> space
<div class='arrow bottom'></div> space with proper spacing?
</div>
Similar to Roko C, but a little more control over size and placement.
I have created a skewed div using following css
#outer-left{
-ms-transform: skew(-30deg,0deg); /* IE 9 */
-webkit-transform:skew(-30deg,0deg); /* Chrome, Safari, Opera */
transform: skew(-30deg,0deg);
background:#333333;
width:200px;
z-index:20;
border-bottom:3px solid #2E8DEF;
padding:10px 30px 10px 75px;
font-size:20px;
color:#2E8DEF;
position:relative;
left:-50px;
}
#outer-left:after{
content:"";
display:inline-block;
position:absolute;
width:20px;
height:100%;
background:#2E8DEF;
float:right;
right:0px;
top:0px;
z-index:10;
}
#inner-left{
-ms-transform: skew(30deg,0deg); /* IE 9 */
-webkit-transform: skew(30deg,0deg); /* Chrome, Safari, Opera */
transform: skew(30deg,0deg);
display:inline-block;
}
And used two divs i.e. outer div to skew border and div and inner div to cancel the skew effect for text.
But I have achieved same effect using only one div in div3
Look at fiddle: http://jsfiddle.net/5a7rhh0L/
IF I do the same as in div 3 with more text it gets distorted.
But not so in case of div2 with more text using 2 divs.
I am completely aware of what is happening here. I want to know if DIV2 can be achieved using only one div i.e. <div id="inner-div">Context<br>Hello</div> and now without using two divs i.e. inner and outer one.
I believe this is what you want:
http://jsfiddle.net/5a7rhh0L/3/
CSS:
#a {
position: relative;
width: 120px;
padding: 10px 20px;
font-size: 20px;
position: relative;
color: #2E8DEF;
background: #333333;
border-bottom: 3px solid #2E8DEF;
}
#a:after {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: #333333;
border-bottom: 3px solid #2E8DEF;
border-right: 20px solid #2E8DEF;
transform-origin: bottom left;
-ms-transform: skew(-30deg, 0deg);
-webkit-transform: skew(-30deg, 0deg);
transform: skew(-30deg, 0deg);
}
I want create one circle with CSS that cut off one piece (like pizza :D) but I don't know about it. please guide me how to create one circle like pizza that one piece cut off.
this is my code :
HTML:
<div class="state"></div>
CSS:
.state {
position: absolute;
height: 44px;
width: 44px;
right: 5px;
top: 0;
border: 3px solid transparent;
border-radius: 25px;
z-index: 1;
border-color: #82ba00
}
I want create this image :
Using the link RJo provided and the demo in one of the answers I came up with this:
<div class="arc-wrapper">
<div class="arc arc_start"></div>
<div class="arc arc_end"></div>
</div>
.arc-wrapper {
position:relative;
margin:20px;
}
.arc {
position:absolute;
top:0;
left:0;
width: 100px;
height: 100px;
border-radius:100%;
border:1px solid;
border: 10px solid;
border-color: #82ba00;
}
.arc_start {
border-color:#82ba00 transparent;
-webkit-transform: rotate(-65deg);
-moz-transform: rotate(-65deg);
-ms-transform: rotate(-65deg);
-o-transform: rotate(-65deg);
transform: rotate(-65deg);
}
.arc_end {
border-color: transparent #82ba00 #82ba00 #82ba00;
-webkit-transform: rotate(-110deg);
-moz-transform: rotate(-110deg);
-ms-transform: rotate(-110deg);
-o-transform: rotate(-110deg);
transform: rotate(-110deg);
}
You can change the size and direction of the gap by changing the rotate(deg) values.
Demo: http://jsfiddle.net/mmetsalu/JmruQ/
Here is the solution.
Working Fiddle
Inspiration from magnifying glass shape from this LINK
EDIT: This is a adjustable arc too. So you can increase or decrease size of the circle only by making one change to this line in the CSS
font-size: 15em; /* This controls the size. */
CSS
#pie {
font-size: 15em;
/* This controls the size. */
display: inline-block;
width: 0.5em;
height: 0.5em;
border: 0.05em solid #00cc00;
position: relative;
border-radius: 0.35em;
}
#pie::before {
content:"";
display: inline-block;
position: absolute;
right: 0.33em;
bottom: 0em;
border-width: 0;
background: white;
width: 0.22em;
height: 0.12em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
HTML
<div id="pie"><div>
EDIT 2:
Here is a fiddle of a Canvas based solution. Personally i feel you should use this method.
FIDDLE
Code borrowed from Tharindulucky
See this fiddle: http://jsfiddle.net/avrahamcool/vqu5d/
HTML:
<div id="circle"></div>
CSS:
#circle {
width: 50px;
height: 50px;
border-radius: 50%;
border: 10px solid green;
border-bottom-color: transparent;
transform:rotate(30deg);
}
You can easily do it by using HTML5 Canvas element.
First write the code for cavas. (Just like a div.)
<canvas id="myCanvas" width="200" height="100" style="border: 1px solid black;"></canvas>
And then write the script for it
<script>
var d=document.getElementById("myCanvas");
var dtx=d.getContext("2d");
dtx.beginPath();
dtx.arc(95,50,40,0,1.8*Math.PI);
dtx.lineWidth = 5;
dtx.stroke();
</script>
It will produce what you want. Have fun!
For more advanced reference, http://www.html5canvastutorials.com/tutorials/html5-canvas-circles/