ホームページ > 記事 > ウェブフロントエンド > CSSで角丸三角形を実装する方法

CSSで角丸三角形を実装する方法

小云云オリジナル: 2018-03-26 09:26:323519ブラウズ

この記事では、角丸三角形のCSS実装のサンプルコードに関する情報を中心に紹介していますので、編集者が非常に良いと思ったので、参考として共有させていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

前書き

ターゲット実現のレンダリングは次のとおりです:

実績

<i class="triangle triangle-up"></i>
<i class="triangle triangle-right"></i>
<i class="triangle triangle-down"></i>
<i class="triangle triangle-left"></i>

.triangle{
  display: inline-block;
  font-size: 0;
  overflow: hidden;
}

.triangle:before{
  content: "";
  position: relative;
  display: inline-block;
  border: 25px solid transparent;
}

.triangle-up{
  position: relative;
  top: 2px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}
.triangle-up:before{
  bottom: 2px;
  border-top-width: 0;
  border-bottom-width: 50px;
  border-bottom-color: rgb(181, 181, 181);
}

.triangle-right{
  position: relative;
  right: 2px;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}
.triangle-right:before{
  left: 2px;
  border-right-width: 0;
  border-left-width: 50px;
  border-left-color: rgb(181, 181, 181);
}

.triangle-down{
  position: relative;
  bottom: 2px;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}
.triangle-down:before{
  top: 2px;
  border-bottom-width: 0;
  border-top-width: 50px;
  border-top-color: rgb(181, 181, 181);
}

.triangle-left{
  position: relative;
  left: 2px;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}
.triangle-left:before{
  right: 2px;
  border-left-width: 0;
  border-right-width: 50px;
  border-right-color: rgba(181, 181, 181, 1);
}

分析

上記のコードから三角形を抽出して分析します。三角下を例。

通常、CSS ではスラッシュを描画できないため、別の方法を見つける必要があります。上記の実装コードを見ると、実際にはこれが中心であり、複雑ではないことがわかります

三角形のサイズや形状は次のように調整できます。この目的を達成するには、たとえば、三角の下のサイズを調整します:

高さを調整: border-top-width: 100px;; 幅を調整: border -right-width: 50px; border-left-width : 50px;
同様に、他の方向の三角形のサイズを調整します。

「はじめに」の三角の下向きを見てみると、下向きの角度が鋭角ではなく、わずかに「わずかな弧」を描いていることがわかります。

この「小さな円弧」を実現するのは難しいことではありません。実際、これは円弧ではなく、隅を少し「切り取る」ために使用されます。ただし、このタイプの三角形の実際のサイズが使用されているため、遷移は非常に小さいため、肉眼ではこの不調和が認識されず、上記の小さな丸い角であると誤って認識されます。たとえば、2pxが切り取られます。

より調和のとれたトランジションを実現するもう 1 つのアイデアは、十分な大きさの円形のオーバーフロー (非表示領域) を描画し、その中に三角形を配置することです。3 つの角はより調和してカットされますが、この時点で三角形はすでにかなり大きくなっています。 . を縮小するには、transform:scale() を使用します。面倒ですよね。半分の努力で半分の結果、忘れてしまいます...

アプリ

<p class="bubble-box">
  <p class="bubble-box-hat">
    <i class="triangle triangle-up"></i>
  </p> 
  <p class="bubble-box-body">i am isaac!</p>
</p>

.bubble-box{
  font-size: 0;
  margin-top: 50px;
}

.bubble-box-hat{
  text-align: center;
}

.bubble-box-body{
  color: #FFFFFF;
  background: rgb(181, 181, 181);
  font-size: 28px;
  border-radius: 10px;
  padding: 100px;
  text-align: center;
}

CSSで角丸三角形を実装する方法

関連記事