CODEWITHSUNDEEP
htmlcss
Greg
Greg

Reputation: 3063

Straight line with bottom arrow - possible in CSS only?

Is it possible to achieve something like this (straight line "cut" with a kind of arrow / triangle 30 pixels from the left) fully in CSS? (did this using adobe fireworks but want to get rid of images as much as possible on my website).

Here is what I have tried without success: http://jsfiddle.net/U8AF6/

Many thanks

enter image description here

CSS

body {
background: red;
}

.arrow_box {
    position: relative;
    background: #88b7d5;
    border: 1px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
    top: 100%;
    left: 10%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(136, 183, 213, 0);
    border-top-color: red;
    border-width: 16px;
    margin-left: -16px;
}
.arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-top-color: #c2e1f5;
    border-width: 22px;
    margin-left: -22px;
}

Upvotes: 2

Views: 3010

Answers (2)

Quad
Quad

Reputation: 1718

it's possible with some css3 transformations(in ways i consider "dirty") and if you want to support older browsers css3 is out of question

here:Fiddle

.bottom-line{
    border-bottom:1px solid #999;
}

.bottom-line:after{
    content:"";
    display:block;
    margin-bottom:-8px;
    border-right:1px solid #999;
    border-bottom:1px solid #999;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);   
    width:12px;
    height:12px;
    background-color:#fff;
    z-index:200px;
    margin-left:100px;
}

also check @drublic's answer.

If you need to support older browsers(pre ie9),your other option is creating a small down arrow picture, place it after some 1px border and give the image an -1px margin so it overlaps the border.

Upvotes: 4

drublic
drublic

Reputation: 993

You can use pseudo elements for that. Please see Nicolas Gallagher's experiment for more: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

The basic code is:

.triangle:before,
.triangle:after {
  content: "";
  position: absolute;
  bottom: -15px; /* value = - border-top-width - border-bottom-width */
  left: 30px;
  border-width: 15px 15px 0; /* vary these values to change the angle of the vertex */
  border-style: solid;
  border-color: #aaa transparent;
}

.triangle:after {
  bottom: -14px; /* -1px of first element for border */
  border-color: #fff transparent;
}

Please see an implementation here: http://dabblet.com/gist/11146863 This only works on solid background.

Upvotes: 4

Related Questions