純粋な CSS3+DIV で小さな三角形の境界線効果を実現するためのサンプル コード

純粋な CSS3+DIV で小さな三角形の境界線効果を実現するためのサンプル コード

具体的なコードは次のとおりです。

HTMLコードは次のとおりです <div class="arrow-up">
     <!--上向きの三角形-->
</div>
<div class="arrow-down">
    <!--下向きの三角形-->
</div>
<div class="arrow-left">
    <!--左向きの三角形-->
</div>
<div class="arrow-right">
    <!--右向きの三角形-->
</div>
 
以下では、CSS3を使用して、それぞれ上向き、下向き、左向き、右向きの三角形を実装します。/*上向き矢印*/
.矢印上 {
    幅:0;
    高さ:0;
    border-left:30px 透明、実線;
    border-right:30px 透明、実線;
    border-bottom:30px solid #fff;
}
    
 /*下矢印*/
.矢印下{
    幅:0;
    高さ:0;
    border-left:20px 透明、実線;
    border-right:20px 透明、実線;
    上境界線:20px 実線 #0066cc;
}
    
 /*左向きの矢印*/
.矢印左 {
    幅:0;
    高さ:0;
    border-top:30px 透明;
    border-bottom:30px 透明;
    border-right:30px 黄色一色;
}
   
/*右矢印*/
.矢印右 {
    幅:0;
    高さ:0;
    border-top:50px 透明;
    border-bottom: 50px 透明の実線;
    border-left: 50px 緑一色;
}

ミニプログラムの例

wxml

<view class="index_sale_lists">
      <view class="sanjiao"></view>
      <view class="index_sale_list">
        <view class="index_sale_choice">選択した商品: <text>Shangnao</text></view>
        <view class="index_sale_tezhi">
          <テキスト>
            特徴:牛の肩と首の後ろ、背骨の両側にあります。肉は柔らかくてジューシーで、脂肪が均等に分散され、美しい大理石模様があります。柔らかい食感で口の中でとろけます。脂肪が少なく、タンパク質が豊富です。鍋に適しており、揚げ物、揚げ物、グリル料理にも使用できます。
          </テキスト>
        </ビュー>
      </ビュー>
    </ビュー>

wxss

.index_sale_lists{
  マージン: 50rpx 24rpx 0;
  背景色: #F2F6F4;
  境界線の半径: 20rpx;
  位置: 相対的;
}
.サンジャオ{
    位置: 絶対;
    左: 50%;
    上:-15rpx;
    幅:0;
    高さ:0;
    border-left:10px 透明、実線;
    border-right:10px 透明、実線;
    ボーダー下部:10px 実線 #F2F6F4;
    /* zインデックス: -1; */
}

要約する

純粋な CSS3+DIV を使用して小さな三角形の境界線を実現する方法についての記事はこれで終わりです。三角形の境界線を実現する方法に関するより関連性の高い CSS div コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<:  MySQL インデックス障害の上位 10 の問題の概要

>>:  Div はフラッシュを覆います。フラッシュ透過方式により、フラッシュ上に DIV レイヤーを配置できます。

推薦する

コンテナDockerCommitを介してイメージを送信し、DockerPushでイメージをプッシュします。

ローカルでコンテナを作成した後、このコンテナに基づいてローカル イメージを作成し、このイメージを D...

CSS3 変換遷移ジッター問題の解決

transform: scale(); スケーリングするとIEブラウザでジッターが発生します変換スケ...

Vueを使い始める際に習得する必要がある知識について簡単に説明します

最も人気のあるフロントエンド フレームワークの 1 つとして、Vue は多くのフロントエンド開発エン...

WeChatアプレットが弾丸画面を送信するビデオプレーヤーを実装

この記事では、WeChatアプレットでビデオプレーヤーの集中砲火を実装するための具体的なコードを参考...

Docker で Kong API Gateway をインストールして使用する詳細なチュートリアル

1 はじめにKong は単純な製品ではありません。この記事で言及されている Kong は主に Kon...

WindowsにMySQL5.7圧縮パッケージを素早くインストールする

この記事では、Windows に MySQL 5.7 圧縮パッケージをインストールする方法について説...

MySQL 5.7.17 winx64 解凍版のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 5.7.17 winx64解凍版のインストールと設定方法を紹介します。具体...

Linuxの相対パスと絶対パスの使用

01. 概要絶対パスと相対パスはシェル環境でよく使用され、それぞれに独自の用途があります。相対パスの...

Dockerバッチコンテナオーケストレーションの実装

導入Dockerfile ビルドの実行は、単一のコンテナの手動操作です。マイクロサービス アーキテク...

パフォーマンス負荷診断にMySQLシステムデータベースを使用する方法

ある達人がかつて、自分の妻のことを知るのと同じくらい、自分が管理するデータベースのことを知るべきだと...

IE ラベル LI テキスト折り返し問題について

私は長い間この問題に悩まされていましたが、検索してみたところ、実際にこの問題を解決した人がいることが...

JavaScript オブジェクト (詳細)

目次JavaScript オブジェクト1. 定義2. オブジェクトの分類3. オブジェクトを定義する...

JavaScript を使用せずに HTML の a タグを無効にするには、純粋な CSS を使用します。

実際、この問題は、HTML の select タグを初めて学んだときにすでに発生していました。今日に...

Linux jdk のインストールと環境変数の設定チュートリアル (jdk-8u144-linux-x64.tar.gz)

最初にsudo suコマンドを使用して root アカウントに切り替えることをお勧めします。そうしな...

HTMLのフォントがline-heightを指定しても垂直方向に中央揃えできない問題の解決方法を詳しく説明します

による写真に示されている効果を例に挙げてみましょう。明らかに、「次へ」というテキストを水平方向だけで...