☰

矢印付きの吹き出し 質問する

tag-icon • tag-icon css css-shapes
矢印付きの吹き出し 質問する

挿入する必要があるプロジェクトがあります吹き出し / メッセージボックス私が実現しようとしている大まかな形は次のようになります。

矢印または三角形の付いた CSS 吹き出し

.bubble {
  height: 100px;
  width: 200px;
  border: 3px solid gray;
  background: lightgray;
  position: relative;
  cursor:pointer;
}
.triangle {
  width: 0;
  border-top: 20px solid black;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  cursor:pointer;
}
<div class="bubble">Speech bubble
</div>
<div class="triangle">
</div>

透明な境界線もクリック可能であるため、これは現在ヒットテストに合格しません。

目的

  • ヒット ボックス (クリック可能/ホバー可能な領域) は、図形の境界に沿っている必要があります (ここでは透明な境界もホバー可能なので、これは無効になります)。

  • さまざまなコンテンツ（画像、グラデーション、テキストなど）の上に図形を表示する必要があります。

問題

この形状を操作する際に発生する主な問題は次のとおりです。

  • 能力がある吹き出しの周りの三角形を移動します参照する要素の位置に応じて（上側/左側/右側/下側）
  • 強調が必要な場合、周囲に境界線またはボックスの影を追加する

これらの問題に対処する方法はあるのでしょうか?

ベストアンサー1

これを実現するには、HTML をより効率的にするためにマークアップを変更することを検討する必要があります。これは疑似要素を使用して実現できます。各ポイントを個別に説明し、回答の最後にすべてをまとめます。

初めに、

余分な要素を避けるために疑似要素を使用する

疑似要素を使用して余分な.trianglediv を削除できます。これにより、div の数が減るだけでなく、メイン要素に応じて配置するためにtop: left: right:およびbottom:css プロパティを使用できるため、配置も容易になります。これは次のようになります。

.oneAndOnlyDiv {
  height: 100px;
  width: 200px;
  border: 3px solid gray;
  background: lightgray;
  position: relative;
}
.oneAndOnlyDiv:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 20px;
  width: 0;
  border-top: 20px solid black;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}
<div class="oneAndOnlyDiv">Main div</div>

ヒットテスト

「ヒット テスト」を作成するには、境界ハックの代わりに回転した要素を使用することをお勧めします。

何かのようなもの：

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor:pointer;
}
div:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 20px;
  height: 20px;
  width: 20px;
  background: black;
  transform: rotate(45deg);
  transform-origin:top right;
}
<div>Only element</div>

または、傾斜した疑似要素を使用します。

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor:pointer;
}
div:before {
  content: "";
  position: absolute;
  top: 90%;
  left: 20px;
  height: 30%;
  width: 20px;
  background: black;
  transform: skewY(-45deg);
  transform-origin:bottom left;
  z-index:-1;
}
<div>Only element</div>

正方形またはメイン要素にマウスを置いたときにのみポインターが表示されます。しかし、ちょっと待ってください。これでは配置がおかしくなります。どう対処すればよいでしょうか。

これにはいくつかの解決策があります。その 1 つは、calcCSS プロパティを使用することです。

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor:pointer;
}
div:before {
  content: "";
  position: absolute;
  top: -webkit-calc(100% - 10px); /*may require prefix for old browser support*/
  top: calc(100% - 10px); /*i.e. half the height*/
  left: 20px;
  height: 20px;
  width: 20px;
  background: gray;
  transform: rotate(45deg);
}
<div>Only element</div>

境界線を追加する

メイン要素に境界線宣言を追加し、疑似要素のborder-bottomandを次のように設定するだけで、境界線を簡単に追加できます。border-rightinherit

国境

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor:pointer;
  border:3px double black;
}
div:before {
  content: "";
  position: absolute;
  top: -webkit-calc(100% - 10px); /*may require prefix for old browser support*/
  top: calc(100% - 10px); /*i.e. half the height*/
  left: 20px;
  height: 20px;
  width: 20px;
  background: gray;
  transform: rotate(45deg);
  border-bottom:inherit;
  border-right:inherit;
  box-shadow:inherit;
}
<div>Only element</div>

ボックスシャドウ:

ボックス シャドウを作成するために、:after疑似要素を使用してボックス シャドウを他の疑似要素の上に隠し、要素を 1 つの要素のように見せました。

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor:pointer;
  box-shadow: 5px 5px 10px 2px black;
}
div:before,div:after {
  content: "";
  position: absolute;
  top: -webkit-calc(100% - 10px); /*may require prefix for old browser support*/
  top: calc(100% - 10px); /*i.e. half the height*/
  left: 20px;
  height: 20px;
  width: 20px;
  background: gray;
  transform: rotate(45deg);
z-index:-1;
  box-shadow:inherit;
}
div:after{
  box-shadow:none;
  z-index:8;
  }
<div>Only element</div>

すべてを一緒に入れて

また、border-radius プロパティを使用して、メッセージ ボックスまたは吹き出しに境界線の半径を追加することもできます。

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor:pointer;
  border:3px double black;
  border-radius:10px;
}
div:before {
  content: "";
  position: absolute;
  top: -webkit-calc(100% - 10px); /*may require prefix for old browser support*/
  top: calc(100% - 10px); /*i.e. half the height*/
  left: 20px;
  height: 20px;
  width: 20px;
  background: gray;
  transform: rotate(45deg);
  border-bottom:inherit;
  border-right:inherit;
  box-shadow:inherit;
}
<div>Only element</div>

これにより、三角形だけでなく円も作成できるようになります。

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor:pointer;
  border:3px double black;
  border-radius:10px;
}
div:before {
  content: "";
  position: absolute;
  top: -webkit-calc(100% - 13px); /*may require prefix for old browser support*/
  top: calc(100% - 13px); /*i.e. half the height + border*/
  left: 20px;
  height: 20px;
  width: 20px;
  background: gray;
  transform: rotate(45deg);
  border:3px double transparent;
  border-bottom:inherit;
  border-right:inherit;
  box-shadow:inherit;
  border-radius:50%;
}
<div>Only element</div>

コンテンツがオーバーフローしてこの疑似要素の背後に「隠れる」という問題が発生しており、境界線の有無にこだわらない場合は、負の z-index を使用してこの問題を解決できます。

「マジックナンバー」を使うのは好きではないですか?

私の回答の配置で現在使用されている計算値を使用するアイデアが気に入らない場合は（作業中）、次のように使用することをお勧めします。transform:translate(50%)

これは、次の理由から、はるかに優れたアプローチです。

  • 境界線のサイズや幅の半分を知る必要はありません
  • メッセージ ボックス/バブルの配置をより動的にし、さらにサイズを変更できるようにする予定です。

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor: pointer;
  border: 3px double black;
  border-radius: 10px;
}
div:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 30px;
  height: 20px;
  width: 20px;
  background: gray;
  box-sizing:border-box;
  transform: rotate(45deg) translate(-50%);
  border-bottom: inherit;
  border-right: inherit;
  box-shadow: inherit;
}
<div>Only element</div>

移動したいですか? できます!

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor: pointer;
  border: 3px double black;
  border-radius: 10px;
}
div:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 10%;
  height: 20px;
  width: 20px;
  background: gray;
  box-sizing: border-box;
  transform: rotate(45deg) translate(-50%);
  border-bottom: inherit;
  border-right: inherit;
  box-shadow: inherit;
  transition: all 0.8s;
}
div:hover:before {
  left: 90%;
}
<div>Only element</div>

右のものが欲しいですか?

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor: pointer;
  border: 3px double black;
  border-radius: 10px;
}
div:before {
  content: "";
  position: absolute;
  top: 15%;
  left: 100%;
  height: 20px;
  width: 20px;
  background: gray;
  box-sizing:border-box;
  transform: rotate(45deg) translate(-50%);
  border-top: inherit;
  border-right: inherit;
  box-shadow: inherit;
  transition:all 0.8s;
}
div:hover:before{
  top:80%;
  }
<div>Only Element</div>

別の形の三角形にしたいですか?

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor: pointer;
  border-radius: 10px;
}
div:before {
  content: "";
  position: absolute;
  top: 70%;
  left: 100%;
  height: 20px;
  width: 20px;
  background: gray;
  box-sizing:border-box;
  transform:  translate(-50%) skewX(45deg);
  box-shadow: inherit;
  transition:all 0.8s;
  z-index:-1;
}
div:hover:before{
  transform:  translate(-50%);
  border-radius:50%;
  top:20%;
  }
<div>Only Element</div>

おすすめ記事