Curved lines using only HTML and/or CSS

by

You should probably be using canvas, since canvas is designed for drawing stuff. The performance of using canvas should be better than using DOM elements, especially with newer versions that uses GPU acceleration for drawing.

Anyway, you can always use border-radius combined with border-width or border-color to create curves by showing only one side of the border of element, while hiding all others: 

#curves.width div {
    border-color: transparent transparent transparent #999;
}

#curves.color div {
    border-width: 0 0 0 1px;
}

Combining this with different combinations of border-radius, and you’ve got yourself some curves. I’ve whipped up a very simple demo for this here: http://www.jsfiddle.net/yijiang/nDxYJ/

You can even combine it with CSS3 transform rotation and transformation for more flexibility. It is, however, still more restrictive than using canvas, and more difficult to control too.

More Related Contents:

  1. I want to create a color picker in ionic app [closed]
  2. CSS technique for a horizontal line with words in the middle
  3. Vertically centering a div inside another div [duplicate]
  4. CSS Display an Image Resized and Cropped
  5. Why position:sticky is not working when the element is wrapped inside another one?
  6. What’s the difference if I put css file inside or ?
  7. Change bullets color of an HTML list without using span
  8. Change color of sibling elements on hover using CSS
  9. Word wrap options in a select list
  10. ie9 border radius
  11. Setting transform-origin on SVG group not working in Firefox
  12. Color of stacked semi-transparent boxes depends on order?
  13. text-overflow: ellipsis not working
  14. using text-align center in colgroup
  15. Scale image to fit a bounding box
  16. Pure css Chessboard with div & no classes or ids, is it possible?
  17. 100% width minus margin and padding [duplicate]
  18. How to include all css kept in a directory?
  19. display:inline with margin, padding, width, height
  20. Insert HTML from CSS
  21. How to show an animation that is hidden behind a colored div using a “reveal” div on the surface
  22. Responsive order confirmation emails for mobile devices?
  23. How to get rid of extra space below svg in div element
  24. How to align footer (div) to the bottom of the page? [duplicate]
  25. CSS: display:block; vs display:table;
  26. How to curve the div from bottom with image background
  27. How do I stretch a background image to cover the entire HTML element?
  28. When to use CSS positioning?
  29. How to create a ribbon shape in CSS
  30. CSS – make div’s inherit a height

Leave a Comment