0

I want to make div borders with this kind of angular area. Exactly as it says in the image, I have marked with red oval.

Image

This is what I have tried so far:

HTML:

<div class="box">
    <header><b>List header</b></header>
       <ul>
          <li>List 1</li>
          <li>List 2</li>
          <li>List 3</li>
       </ul>
</div>

CSS:

.box{
    border:2px solid gray;
    background: #DC143C;
    padding:10px;

}
.box ul{
   list-style-type:square;  
}

See demo

It worked yesterday.
  • 4,507
  • 11
  • 46
  • 81
Munira
  • 153
  • 16
  • there is no border like this one. you need to shape a new element this way and put it near the left border to achieve this visual result. – Banana May 23 '15 at 15:16
  • Have a look at [this thread](http://stackoverflow.com/questions/30299093/speech-bubble-with-arrow). The shape you want to achieve would need a similar approach as mentioned in it. – Harry May 23 '15 at 15:17
  • HEY BANANA, please show me how. – Munira May 23 '15 at 15:17
  • @Munira you can find a good solution in the thread suggested by harry. – Banana May 23 '15 at 15:18

1 Answers1

1

You could do this with pure css with borders. Create a content with :after pseudo class with css and then set its height and width to 0. You could change the width of your triangle by changing border-width property. Its easier to show it than saying. Here is a demo Fiddle to play around.

html

<div></div>

css

div {
    display: inline-block;
    height: 110px;
    width: 500px;
    background: tomato;
    margin-left: 150px;
}
div:after{
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 100px 40px 0;
    border-color: transparent tomato transparent transparent;
    position: absolute;
    left: 60px;
    top: 20px;
}
It worked yesterday.
  • 4,507
  • 11
  • 46
  • 81
  • thanks a lot, but it requires very accurate calculation, and might be broken with different resoluion and browser, if I am guessing correct. – Munira May 23 '15 at 16:06
  • If you are talking about absolute positing wrap your menu with a div and make its positioning relative. so the triangle will stay wherever you want and safe to use https://jsfiddle.net/f1ot4gf1/1/ – It worked yesterday. May 23 '15 at 16:15