how to draw a shape by using canvas or css? [closed]


Tags: html,css,css3,canvas

Problem :

i'm looking for a way to create this shape with html(css) or canvas.

thanks.

enter image description here



Solution :

Try this:

<script>
  var canvas = document.getElementById('myCanvas'),
      context = canvas.getContext('2d'),
      startAngle = 1.2 * Math.PI,
      endAngle = 0.8 * Math.PI;

  context.beginPath();
  context.moveTo(50, 70);
  context.lineTo(250, 70);
  context.arc(300, 100, 50, startAngle, endAngle, false);
  context.lineTo(50, 130);
  context.closePath();
  context.lineWidth = 5;
  context.strokeStyle = 'blue';
  context.stroke();
</script>

For detailed information have a look here


    CSS Howto..

    how to position nested list items?

    CSS How to hide current child menu items when hovering over parent's sibling items without javascript

    How to adjust responsive behaviour of menu bar's elements

    On scroll up use the animate() and show the div

    How to center horizontally a position: absolute elment on a position: fixed container

    How to “reset” style in view page, set in css file

    How to apply custom styles to a jasper html report

    How to change css content hover effect background color css php in this situation?

    How to debug less css variables

    How to dynamically colour svg images in a webpage? [duplicate]

    How to automatically choose which css to use depending on the URL/website and/or server I'm on?

    How to force input type text within span width

    How to feature detect for CSS custom properties? [duplicate]

    CSS: How to get a button to always be to the left of another button that's in a corner?

    How to overwrite css style in a specific page?

    How to add multiple link styles on the same page?

    How to alter hover effects for image button and embedded text?

    How to change Polymer(1.0) paper-toolbar background colour?

    How to add a css class into my function

    How can I make a drop down menu without changing the width of the main menu item?

    How to make a rollover div clickable?

    How to align items in second (and further) column, so that the changing value (increasing characters) do not push

    How to recursively remove CSS classes

    How do i place 4 headers from 1 div next to each other?

    How to change colour of Bootstrap scroll spy and why won't my logos resize?

    How to add formatting to my pagination

    how to add active css class to a link in Wordpress

    How to get arrows appear on carousel only on hover

    How to make sure my css overlay is on top at any site?

    In CSS, how to make the window non-scrollable when an element overflows?