CODEWITHSUNDEEP
htmlcsscss-shapes
Yousi
Yousi

Reputation: 1143

html box with arrow inside

A client is requesting boxes on his website that should appear like the one below

box appearance

as you can see, the box has a small arrow with a unique shape on the left hand side.

I have tried everything and visited lots of links and i can't design it.

the problem is, this box will have different sizes and that image should always be in the center of the box and should hide a portion of the border (as u can see)

please help, i am all out of options here.

Thank you, Yasser

Upvotes: 3

Views: 11841

Answers (4)

Vytautas Butkus
Vytautas Butkus

Reputation: 5535

Here I made fiddle for you:

<div class="box"></div>

.box{
    border:solid 1px black;
    position:relative;
    display:block;
    height:100px;
    width:100px;
    margin-left:5px;
}
.box:before{
    content:"";
    display:inline-block;
    position:absolute;
    border:10px solid black;
    border-color:transparent transparent transparent black;
    top:40px;
}
.box:after{
    content:"";
    display:inline-block;
    position:absolute;
    border:9px solid white;
    border-color:transparent transparent transparent white;
    top:41px;
    left:-1px;
}

Fiddle here http://jsfiddle.net/y5dZj/

As others told :after and :before used

-edited: Dont use transform if you want full compatibility in old browsers. My example will work even in IE8(not sure about 7)

Upvotes: 9

Sowmya
Sowmya

Reputation: 26969

HTML

<div></div>​

CSS

div {
    margin:20px;
    height: 120px;
    width: 250px;
    background-color: #ededed; 
    border:#ccc solid 1px;
    position:relative;
}
div:after{
    content:'';
    width:20px;
    height:20px;
    background:#fff;
    position:absolute;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    top:42%;
    left:-11px;
    border-right:#ccc solid 1px;
    border-top:#ccc solid 1px;
} ​

LIVE DEMO

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32152

Used to this

Css

 div{
    position:relative;
      width:200px;
      height:200px;
      background:red;
    }
    div:after{
    content:'';
      position:absolute;
      left:-10px;
      top:50%;
      margin-top:-10px;
      width:20px;
      height:20px;
      background:#fff;
      transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
    }

HTML

<div></div>

Demo

Upvotes: 2

Billy Moat
Billy Moat

Reputation: 21050

Here's one way you could do it: http://jsfiddle.net/vKY3x/

<div>
    <span></span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus varius felis, sit amet malesuada urna euismod convallis. Donec at diam eros
</div>

div {
    position:relative;
    width:300px;
    padding:30px;
    border:1px solid #ccc;
}

div span {
    display:block;
    width:20px;
    height:20px;
    background:#666;
    position:absolute;
    left:-1px;
    top:50%;
    margin-top:-10px;
}

Upvotes: 1

Related Questions