css прозрачный треугольник с рамкой

Можно ли нарисовать треугольник, как на картинке с правой стороны? http://s15.postimg.org/h2vruavmz/triangle.jpg css прозрачный треугольник с рамкой

Я хочу перекосить его, сделать прозрачность фона 0.5 и скрыть нижнюю границу треугольника.

body { 
 
    background-color: #ccc; 
 
} 
 
.arrow_box { 
 
\t position: absolute; 
 
    top: 40px; 
 
    left: 40px; 
 
\t background: #fff; 
 
\t /*border: 1px solid #ffffff;*/ 
 
} 
 
.arrow_box:after, .arrow_box:before { 
 
\t bottom: 100%; 
 
\t left: 50%; 
 
\t border: solid transparent; 
 
\t content: " "; 
 
\t height: 0; 
 
\t width: 0; 
 
\t position: absolute; 
 
\t pointer-events: none; 
 
} 
 

 
.arrow_box:after { 
 
\t border-color: rgba(0, 0, 0, 0); 
 
\t border-bottom-color: #fff; 
 
\t border-width: 20px; 
 
\t margin-left: -20px; 
 
} 
 
.arrow_box:before { 
 
\t border-color: rgba(255, 255, 255, 0); 
 
\t border-bottom-color: #000; 
 
\t border-width: 21px; 
 
\t margin-left: -21px; 
 
}

<div class="arrow_box"></div>

источник

2015-08-20 mr.boris

вы можете использовать transform: skew(60deg,0deg); на :before и :after

body { 
 
    background-color: #ccc; 
 
} 
 
.arrow_box { 
 
\t position: absolute; 
 
    top: 40px; 
 
    left: 40px; 
 
\t background: #fff; 
 
\t /*border: 1px solid #ffffff;*/ 
 
} 
 
.arrow_box:after, .arrow_box:before { 
 
\t bottom: 100%; 
 
\t left: 50%; 
 
\t border: solid transparent; 
 
\t content: " "; 
 
\t height: 0; 
 
\t width: 0; 
 
\t position: absolute; 
 
\t pointer-events: none; 
 
    transform: skew(60deg,0deg); 
 
} 
 

 
.arrow_box:after { 
 
\t border-color: rgba(0, 0, 0, 0); 
 
\t border-bottom-color: #fff; 
 
\t border-width: 20px; 
 
\t margin-left: -12px; 
 
} 
 
.arrow_box:before { 
 
\t border-color: rgba(255, 255, 255, 0); 
 
\t border-bottom-color: #000; 
 
\t border-width: 24px; 
 
\t margin-left: -21px; 
 
}

<div class="arrow_box"></div>

Fiddle

Я не думаю, что вы могли бы легко сделать этот фон прозрачным с помощью техники, которую вы использовали для рисования треугольников. Вы можете использовать изображение png, если можете.

источник

2015-08-20 10:47:31

Хорошо, спасибо, это было решение. Но когда я хочу сделать белым и прозрачным нижний цвет границы 0,3 "rgba (255, 255, 255, .3)", он остается сплошным белым. Когда я меняю border-bottom-color на rgba (0, 0, 0, .3), он работает хорошо, но я не хочу делать его черным и прозрачным, я хочу сделать его белым и прозрачным. Это ошибка? –

Метод, который вы используете в настоящее время, означает, что вы не сможете установить полупрозрачный «фон» на треугольник. Это связано с тем, что черные границы треугольника на самом деле представляют собой несколько больший отдельный треугольник, просто случается, что меньший белый треугольник перекрывает его центр. Если вы измените непрозрачность белого треугольника, вы просто заглянете в черный треугольник.

Этого можно избежать, используя другой способ создания треугольника. Общий принцип состоит в том, чтобы создать коробку, затем повернуть ее на свою сторону, используя transform: rotate(45deg);. Используя overflow: hidden; на контейнере, вы можете отрезать половину коробки, чтобы оставить вас с треугольником без нижней границы.

Затем вы можете перекосить контейнер, используя transform: skewX(55deg);, чтобы подтолкнуть треугольник в одну сторону.

body { 
 
    background-color: #ccc; 
 
} 
 
.arrow_box { 
 
    height: 17px; 
 
    left: 40px; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    top: 40px; 
 
    transform: skewX(55deg); 
 
    width: 34px; 
 
} 
 
.arrow_box:after { 
 
    background-color: rgba(255, 255, 255, 0.5); 
 
    border: 2px solid rgba(0, 0, 0, 1); 
 
    content: " "; 
 
    height: 20px; 
 
    left: 5px; 
 
    position: absolute; 
 
    top: 5px; 
 
    transform: rotate(45deg); 
 
    width: 20px; 
 
}

<div class="arrow_box"></div>

источник

2015-08-20 11:41:06

css прозрачный треугольник с рамкой

ответ

Смежные вопросы