CODEWITHSUNDEEP
htmlcss
Pete
Pete

Reputation: 58432

css3 arrow too large and not opaque

I have the following css arrow fiddle:

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

.arrow { background-color: #F4922D; width: 300px; background: rgba(244,146,45,0.9); padding: 40px 30px; min-height: 100px; position: relative; }
.arrow:after { left: 100%; top: 0; bottom: 0; border: solid transparent; content: " "; width: 0; position: absolute; pointer-events: none; border-color: rgba(244, 146, 45, 0); border-left-color: #F4922D; border-width: 90px; }

My questions are

1: how would I make the arrow tip thinner - ie at the moment to get the point it has to be 90px border-width but I would like the point to show at around 30px but if I change the border width the point just gets cut off

2: how would I make the tip opaque, I tried using border-color: rgba(244, 146, 45, 0.5); but that didn't change anything

Upvotes: 0

Views: 83

Answers (2)

RustyCollins
RustyCollins

Reputation: 349

To solve the opacity issue,

just simply set

opacity: 0.9;

on the pseudo :after element that should solve the issue,

and if you want a cross browser implementation of it then take a look at this

http://css-tricks.com/snippets/css/cross-browser-opacity/

Upvotes: 0

George
George

Reputation: 36784

Adjust only the width of the left border on it to get the 'thin-ness' I think you mean. To make give the tip the same transparency as the <div> itself, again, you need to target only the left border:

.arrow:after {
    left: 100%;
    top: 0; bottom: 0;
    border: solid transparent;
    content: " ";
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: transparent;
    border-left-color: rgba(244,146,45,0.9);
    border-width: 90px;
    border-left-width: 160px;
}

JSFiddle

Upvotes: 1

Related Questions