Как создать форму комментария с помощью css

-1

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

enter image description here

#demo { 
 
    background-color: #333; 
 
    height: 100px; 
 
    position: relative; 
 
    width: 100px; 
 
} 
 
#demo:after { 
 
    content: ' '; 
 
    height: 0; 
 
    position: absolute; 
 
    width: 0; 
 
    border: 10px solid transparent; 
 
    border-top-color: #333; 
 
    top: 100%; 
 
    left: 50%; 
 
    margin-left: -10px; 
 
}

<div id="demo"></div>

источник

2015-01-19 Valeriu92

да, это возможно, то, что вы пробовали, показать нам код .... –

Попробуйте этот пример - http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ –

Почти дубликат http://stackoverflow.com/questions/14168564/creating-shapes-with-css, запрещающий округлую прямоугольную форму в этом образце. – Harry

Вы можете использовать два треугольника на :before и :after: псевдо-элементов.

div { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 40px; 
 
    border: 4px solid black; 
 
} 
 
div:after, div:before { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 0; 
 
    height: 0; 
 
    bottom: -9px; 
 
    right: 20px; 
 
    border-top: 10px solid white; 
 
    border-right: 2px solid white; 
 
    border-left: 10px solid transparent; 
 
} 
 
div:before { 
 
    bottom: -15px; 
 
    right: 16px; 
 
    border-top: 15px solid black; 
 
    border-right: 4px solid black; 
 
    border-left: 15px solid transparent; 
 
}

<div></div>

Вы всегда можете использовать svg, чтобы сделать его еще более проще.

<svg width="108" height="68" viewBox="-2 -2 108 68"> 
 
    <path d="M0,0 h100 v40 h-20 v10 l-10,-10 h-70z" fill="none" stroke="black" stroke-width="3"> 
 
</svg>

Вы можете использовать pattern на stroke вместо одного цвета.

enter image description here

<svg width="108" height="68" viewBox="-2 -2 108 68"> 
 
    <defs> 
 
    <pattern id="pat" patternUnits="userSpaceOnUse" width="6" height="6" viewBox="0 0 6 6"> 
 
     <path d="M0,0 h3 l3,3 v3z M0,6 h3 l-3,-3z" fill="#E9D641" /> 
 
     <path d="M0,0 v3 l3,3 h3z M3,0 h3 v3z" fill="#85A03C" /> 
 
    </pattern> 
 
    </defs> 
 
    <path d="M0,0 h100 v40 h-20 v10 l-10,-10 h-70z" fill="none" stroke="url(#pat)" stroke-width="4" /> 
 
</svg>

источник

2015-01-19 13:15:41

-1

div.icon { 
 
height: 32px; 
 
width: 32px; 
 
position: relative; 
 
margin: 15px; 
 
overflow: hidden; 
 
display: inline-block; 
 
} 
 

 
div.icon div.chat { 
 
width: 32px; 
 
height: 22px; 
 
background: #333; 
 
} 
 

 
div.icon div.chat:after { 
 
content: ''; 
 
width: 0px; 
 
height: 0px; 
 
border-style: solid; 
 
border-color: #333 transparent transparent transparent; 
 
border-width: 5px; 
 
position: absolute; 
 
top: 16px; 
 
left: 2px; 
 
-webkit-transform: rotate(135deg); 
 
-moz-transform: rotate(135deg); 
 
-ms-transform: rotate(135deg); 
 
-o-transform: rotate(135deg); 
 
transform: rotate(135deg); 
 
}

<div class="icon"> 
 
\t <div class="chat"></div> 
 
</div>

источник

2015-01-19 13:22:06

Попробуйте это:

.speech-bubble {  
 
    border-radius: 2px; 
 
    color: #fff; 
 
    margin: 1em 0 3em; 
 
    padding: 15px; 
 
    position: relative; 
 
    border: solid 2px #000; 
 
    color: #000; 
 
} 
 

 
.speech-bubble:after, .speech-bubble:before { 
 
    top: 100%; left: 90%; 
 
    border: solid transparent; 
 
    content: " "; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    pointer-events: none; 
 
} 
 

 
.speech-bubble:after { 
 
    border-color: rgba(255, 255, 255, 0); 
 
    border-top-color: #fff; 
 
    border-width: 20px 0 0 20px; 
 
    margin-left: -20px; 
 
} 
 

 
.speech-bubble:before { 
 
    border-color: rgba(0, 0, 0, 0); 
 
    border-top-color: #000; 
 
    border-width: 27px 0px 0px 27px; 
 
    margin-left: -24px; 
 
}

<div class="speech-bubble">This is a speech bubble</div>

источник

2015-01-19 13:23:07

Как создать форму комментария с помощью css

ответ

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