Как сделать прозрачный пузырь стрелка над фоном изображения с помощью css?

Question

У меня есть изображение, поэтому яснее понять. Мне нужна прозрачная стрелка в условном пузыре. Как получить его с помощью css?

Answer 1

Я считаю, что ищете является this концепция использования границ, цвета & прозрачным. В некоторых случаях используется ::before & ::after pseudos. Ссылка выше содержит более подробную информацию.

Answer 2

body { 
 
    background-image: url('//www.gstatic.com/tv/thumb/tvbanners/12021482/p12021482_b_v8_ab.jpg'); 
 
    background-position: top center; 
 
    background-size: cover; 
 
} 
 
.buble, 
 
.buble-inner { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.buble:after, 
 
.buble:before, 
 
.buble-inner:after, 
 
.buble-inner:before { 
 
    position: absolute; 
 
    display: block; 
 
    content: " "; 
 
} 
 
.buble-inner { 
 
    border-bottom: 1px solid #444; 
 
    color: #444; 
 
    padding: 20px; 
 
    border-radius: 10px; 
 
} 
 
.buble-inner:before { 
 
    top: 0; 
 
    left: 0; 
 
    width: 17px; 
 
    bottom: 0; 
 
    border-top: 1px solid #444; 
 
    border-left: 1px solid #444; 
 
    border-top-left-radius: 10px; 
 
    border-bottom-left-radius: 10px; 
 
} 
 
.buble-inner:after { 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 33px; 
 
    right: 0; 
 
    border-top: 1px solid #444; 
 
    border-right: 1px solid #444; 
 
    border-top-right-radius: 10px; 
 
    border-bottom-right-radius: 10px; 
 
} 
 
.buble:before { 
 
    border-left: 1px solid #231f20; 
 
    border-top: 1px solid #231f20; 
 
    top: -5px; 
 
    left: 20px; 
 
    width: 10px; 
 
    height: 10px; 
 
    -ms-transform: rotate(45deg); 
 
    -webkit-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
}

<div class="buble"> 
 
    <div class="buble-inner"> 
 
    this is message buble! 
 
    <br>you can put as much text in here as you want. 
 
    </div> 
 
</div>

Поэтому в основном я создал абсолютно позиционирован элемент (квадрат), который поворачивается на 45 градусов. Вы можете играть с top, left, width, height, чтобы получить желаемую форму и положение. Я использовал псевдоселектор после (в этом случае это не имеет значения, если оно или :before, потому что элемент абсолютно позиционирован)

Answer 3

Я думаю, что в CSS3 нет прозрачной стрелки. Поскольку нарисовать стрелку с помощью границы необходимо указать цвет фона, вы можете попробовать здесь: http://www.cssarrowplease.com/

Я не знаю, существует ли другой ПОДХОД, чтобы сделать это ...