We need to create a hint with a small triangle on top:

html

<div class="title"> <div class="title-wrapper"> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Все знаках, составитель, пунктуация они предложения родного там большой великий на берегу рукописи, за рыбными то бросил заманивший взгляд злых рекламных.</p> </div> </div>

styles

 .title position: relative border: 1px solid #afafb0 border-radius: 10px background-color: #f6f6f6 &:before content: "" position: absolute width: 15px height: 1px transform: rotate(135deg) bottom: -6px left: 65px background-color: #afafb0 &:after content: "" position: absolute width: 15px height: 1px transform: rotate(-135deg) bottom: -6px left: 55px background-color: #afafb0 &-wrapper p margin: 0 padding: 20px 30px line-height: 24px text-align: left font-size: 12px line-height: 20px color: #333

Need help with the bgc of the triangle itself and a piece of the border of the tooltip itself, you need to somehow hide it, what would happen like this: I ask for help in finalizing the layout

while it turns out the following: Here is the view of my code

  • The question is, why not svg? - Stranger in the Q
  • The condition of the project is on pure css - Ross
  • Can I ask a question, but what’s the point? You have no real tasks? - Stranger in the Q
  • And if the condition is a dental score sweep the apartment? - Stranger in the Q
  • If you can not help, at least do not interfere pliz. Knowledgeable people will come and help. ATP no offense. - Ross

1 answer 1

Here is dirty, in terms of overlapping blocks, if so bad - say

 div.title { position: relative; border: 1px solid #afafb0; border-radius: 10px; background-color: #f6f6f6; } div.title:before { content: ""; position: absolute; width: 15px; height: 15px; transform: rotate(135deg); bottom: -9px; left: 65px; background-color: #f6f6f6; border-right: 1px solid #afafb0; border-top: 1px solid #afafb0; } div.title-wrapper p { margin: 0; padding: 20px 30px; line-height: 24px; text-align: left; font-size: 12px; line-height: 20px; color: #333; } 
 <div> <div class="title"> <div class="title-wrapper"> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Все знаках, составитель, пунктуация они предложения родного там большой великий на берегу рукописи, за рыбными то бросил заманивший взгляд злых рекламных.</p> </div> </div>

  • Fully satisfied! Thank you kind man. - Ross
  • @Ross nzdorove, but better svg - Stranger in the Q