CODEWITHSUNDEEP
htmlcsscss-shapes
Naju
Naju

Reputation: 1541

CSS3 triangle with bottom line

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

enter image description here

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

Please advice me.

Upvotes: 3

Views: 2239

Answers (2)

itaya
itaya

Reputation: 333

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/

Upvotes: 1

Kunj
Kunj

Reputation: 2018

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>

Upvotes: 3

Related Questions