CSSで画像の背景に透明な泡の矢印を作る方法は？

Question

画像が添付されているので分かりやすいです。私は証明書のバブルで透明な矢印が必要です。どのようにCSSでそれを取得するには？

Answer 1

私は何をあなたが探してはthisコンセプトは透明の境界線、色&を使用していると信じています。場合によっては、::before & ::after擬似を使用します。上記のリンクに詳細があります。

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を使用して、希望の形状と位置を得ることができます。私は擬似セレクタを使用しました（この場合、要素が絶対配置されているので、:afterまたは:beforeであるかどうかは関係ありません）

Answer 3

CSS3では透明な矢印を持つことはできません。境界が背景の色を指定する必要が使用して矢印を描画するので、あなたはここで試すことができます。それを行うには、別のaproachが存在する場合http://www.cssarrowplease.com/

私は知らない...リンク用