App下載
首頁 > html > bubble > Page Widget - 如何創(chuàng)建一個(gè)氣泡與箭頭和陰影

Page Widget - 如何創(chuàng)建一個(gè)氣泡與箭頭和陰影

我們想知道如何創(chuàng)建一個(gè)氣泡與箭頭和陰影。 

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
/* Center content in the middle of the screen */
html, body, div {
  height: 100%;
  width: 100%;
  margin: 0px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-box-align: center;
}
/* Make a box that fills 50% of screen */
.box {
  background-color: pink;
  width: 50%;
  height: 50%;
  border-radius: 25px;
  box-shadow: 3px 3px 4px #000;
}
/* Make an arrow */
.arrow {
  background-color: pink;
  box-shadow: 3px 3px 4px #000;
  width: 30px;
  height: 30px;
  /* Translate the box up by width / 2 then rotate */
  -webkit-transform: translateY(-15px) rotate(45deg);
}
</style>
</head>
<body>
  <div class="box">I'm a big beautiful box!</div>
  <div class="arrow"></div>
</body>
</html>