CSS3 triangle with bottom line

Question

Is it possible to draw a below mentioned object as mentioned below by using CSS3??

(triangle at the middle,Left and right side of the triangle have line at the bottom).

Please advice me.

Answer 1

HTML:

<div class="arrow"></div>
<div class="line"></div>

CSS:

.arrow {
    height: 0;
    width: 0;
    border-bottom: 8px solid #FF0000;
    border-left: 16px dotted transparent;
    border-right: 16px dotted transparent;
    left: 0px;
    top: 2px;
    margin-left: 20px;
    z-index: 1;
    position: relative;
}
.line {
    width: 200px;
    height: 2px;
    background: #FF0000;
}

Not exactly the same in dimension but you can edit and create like that.

Edit: For your new shape, add the below in CSS and HTML:

CSS:

.fill {
    position: relative;
    left: -14px;
    top: 2px;
    height: 0;
    width: 0;
    border-bottom: 6px solid #ffffff;
    border-left: 14px dotted transparent;
    border-right: 14px dotted transparent;
    z-index: 2;
}

HTML:

<div class="arrow">
    <div class="fill"></div>
</div>
<div class="line"></div>

Answer 2

In case you need the background behind the triangle to be transparent:

HTML:

<div class="line-separator">
    <div class="side-line"> </div>
    <div class="triangle"> </div>
    <div class="side-line"> </div>
</div>

CSS:

.side-line {
    display: inline-block;
    border-top: 1px solid black;
    width: 20%;
}

.triangle {
    display: inline-block;
    height: 7px;
    width: 7px;
    transform: rotate(45deg);
    transform-origin: center center;
    border-top: 1px solid black;
    border-left: 1px solid black;
    margin-left: -3px;
    margin-right: -3px;
    margin-bottom: -3px;
}

Live demo: http://jsfiddle.net/85saaphw/