主要是第五和第六小问

主要是第五和第六小问，不知道怎么让里面的代码变成文字形式，还有就是尖括号的文本颜色不知道该怎么弄

img


<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style>
    .tip {
      position: relative;
      border: 2px solid pink;
      margin: 20px auto;
      width: 246px;
      height: 83px;
      line-height: 43px;
      color: white;
      text-align: center;
      border-radius: 10px;
      font-family: sans-serif;
    }

    .tip:before {
      content: '';
      width: 0;
      height: 0;
      border: 20px solid;
      position: absolute;
      top: 83px;
      right: 150px;
      border-color: pink transparent transparent;
    }


    .tip:after {
      content: '';
      width: 0;
      height: 0;
      border: 20px solid;
      position: absolute;
      top: 80px;
      right: 150px;
      border-color: white transparent transparent;
    }
  </style>
</head>

<body>

  <div class="tip bottom">
    <p style="color: #aaaa7f;">
      aaaaaaaaa</p>
  </div>

</body>

</html>

这个是第五的