Jump to content

Drawing a line


voip03
 Share

Recommended Posts

you can draw lines with html5 canvas. With css, you require a background image (and than position it so it just touches the 'o') if you want to come close to what you have in your attachment. otherwise text-decoration or border-bottom could work, but that would create a greater gap.

Link to comment
Share on other sites

Oh i just played abit with css3 boxshadow and that is a possibility too, it seems. try it:


<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
.line {
    box-shadow: 0 3px 1px -3px #000;
    display: inline-block;
    line-height: 10px;
    width: 50%;
}
    
</style>
</head>
<body>
    g<span class="line">o</span>
</body>
</html>

Link to comment
Share on other sites

  • 2 weeks later...

You can try it out with <hr>.

 

I tried it. Not so neat but u can play with a bit of css ;D

 

<html>
<head>
<title></title>

<style type="text/css">
.left {
  position:absolute;
  top:15px;
  left:25px;	
width: 15%;
}
.go
{
width:20px;
   float:left;
}
    
</style>
</head>
<body>
   <div class="go"> go</div>
<div  class="left"><hr></div>
</body>
</html>

Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.