Home>

To html

<div>
  <p>Hello. This is an example.</p>
</div>


And write css

.balloon1 {
     position: relative;
    display: inline-block;
     margin: 1.5em 0;
    padding: 7px 10px;
    min-width: 120px;
     max-width: 100%;
     color: # 555;
    font-size: 16px;
    background: # e0edff;
    border-radius: 15px;
}
.balloon1: before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
     margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid # e0edff;
}
.balloon1 p {
    margin: 0;
    padding: 0;
}


I made a speech bubble. However, this will cause the speech balloon part to face down. I wanted to make the part of the speech balloon to the left. . . I want to make the part of the balloon face to the left with this square feeling. Also, I want to make the balloon blue with only the border and make it white in the balloon (which hits the background?). I want to hear how.

The reference site is https://saruwakakun.com/html-css/reference/speech-bubble#section2

css
  • Answer # 1

    body {
      background: palegreen;
    }
    .balloon1 {
      position: relative;
      display: inline-block;
      margin: 1.5em/* 0 * /;
      padding: 7px 10px;
      min-width: 120px;
      max-width: 100%;
      color: # 555;
      font-size: 16px;
      background: # e0edff;
      border-radius:/* 15px */5px;
      / * added */border: 1px solid blue;
    }
    .balloon1: before {
      content: "";
      position: absolute;
      top:/* 100% */50%;
      left:/* 50% */0;
      margin-left:/*-15px * /-20px;
      / * border: 10px solid transparent;* /
      / * border-top: 15px solid # e0edff;* /
      / * added * /
      transform: translateY (-50%);
      width: 20px;
      height: 20px;
      background-size: 10px 10px;
      background-position: 11px 0, 11px 10px, 10px 0, 10px 10px;
      background-image:
        linear-gradient (-45deg, #fff 50%, transparent 50%),
        linear-gradient (-135deg, #fff 50%, transparent 50%),
        linear-gradient (-45deg, blue 50%, transparent 50%),
        linear-gradient (-135deg, blue 50%, transparent 50%);
      background-repeat: no-repeat;
    }
    .balloon1 p {
      margin: 0;
      padding: 0;
    }


    Explanation:

    . balloon1: before {
      position: absolute;
      top: 50%;/* 50% height of parent element, down * /
      transform: translateY (-50%);/* Up by 50% of the height of the child element itself * /
      width: 20px;/* width * /
      height: 20px;/* Height * /
      / * Generate background image with * /
      background-size: 10px 10px;/* Set the width/height of the background image (specify all 4 images) * /
      / * ↓ Set the position of 4 images, top right (shift 1px right), bottom right (shift 1px), top right (frame substitute), bottom right (frame substitute) * /
      background-position: 11px 0, 11px 10px, 10px 0, 10px 10px;
      background-image:
        / * ↓ 45 degrees counterclockwise from 12:00, white up to half, transparent beyond it * /
        linear-gradient (-45deg, #fff 50%, transparent 50%),
        / * ↓ Direction 135 degrees counterclockwise from 12:00, same as above * /
        linear-gradient (-135deg, #fff 50%, transparent 50%),
        / * ↓ 45 degrees counterclockwise from 12 o'clock, half up to blue, beyond that transparent * /
        linear-gradient (-45deg, blue 50%, transparent 50%),
        / * ↓ Direction 135 degrees counterclockwise from 12:00, same as above * /
        linear-gradient (-135deg, blue 50%, transparent 50%);
      background-repeat: no-repeat;/* Cancel image repeat * /
    }



    If you create a background image like this with CSS and place it nicely, it will become a triangle with a border

    Changed size and position for easy understanding

    You can see that the background image of the different colors is "placed slightly to the left and right" to express the border


    Summary of how to use CSS gradient (linear-gradient)!

    Set multiple background images

    Background-size cannot be set for background shorthand

    Background summary. Shorthand, multiple specification, each property

  • Answer # 2

    Check out the "downward" and "leftward" codes to see how they differ.

    【Creating a callout with CSS without using an image | miauler】
    http://miauler.net/blog/archives/2013/07/11_1356.html

    [Create a speech balloon with just CSS! 26 design samples | CodeCampus】

    【CSS makes it! 19 selections of speech balloon designs]
    https://saruwakakun.com/html-css/reference/speech-bubble