Question 267548 in CSS Question posted in
Some basic documentation can be found here.

Css – How to create border with half circular shape on one side

Let’s say I have a header tag like <h1>Menu</h1>

And I want to create a css rule to style it. First, with a blue background color. Then, near the lower right corner of the banner, I want it to style like the image below. Wondering how I can achieve that look.

This is the border style I want to achieve: Border style wanted

Seems really hard to achieve with css. Is there an easier way? I don’t want it to be an image.

Tags:

3

Answers


  1. 0

    This might help, but I’m not too sure it will.
    In css you can use border-radius to make the borders curve in a circulair-esq form. Border radius can also, in some form, be applied to specific sections of your border, such as with for example: border-bottom-right-radius: 50px;
    You can maybe mess around with your borders and use these functions, though it might just be a waste of time.
    Hope this might have helped, if not then I’m sorry and I hope you find your answer elsewhere

    Login or Signup to reply.
  2. 0

    A possible solution is adding spans, with an absolute positioning, and style each of them to match a simple form in the final result.

    note: Don’t forget to create a blue background for the h1 tag, and add the spans above that.

    For example, for the most left small half circle, you might want to make a blue circle, and place it with its center aligning with the bottom line of the h1 background.

    It will take some time, so I recommend to still consider an image.

    Login or Signup to reply.
  3. 0

    it can be done using html and css.
    following is the css for this requirement

     .car {
  width: 300px;  
  height: 100px; 
  background-color: blue; 
  position: relative;
}

.wheel {
  width: 80px;  
  height: 80px; 
  background-color: white; 
  border-radius: 50%; 
  position: absolute;
  
}
.small_wheel {
  width: 30px;  
  height: 30px; 
  background-color: white; 
  border-radius: 50%; 
  position: absolute;
  
}
.wheel.right {
    border: 30px solid blue;
    top: 44px;
    left: 150px;
    background: transparent;
}
.left {
    top: 65px;
    left: 70px;
}
.small_wheel_left{
    background-color: blue;
    top: 65px;
    left: 170px;
    top:95px;
    left:40px;

}

    and this is the html

        <div class="car"></div>
    <div class="wheel right"></div>
    <div class="wheel left"></div>
    <div class="small_wheel small_wheel_left"></div>

    [![the out put of this code showing your requirement][1]][1]

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search