具体的なコードは次のとおりです。 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 レイヤーを配置できます。
ローカルでコンテナを作成した後、このコンテナに基づいてローカル イメージを作成し、このイメージを D...
transform: scale(); スケーリングするとIEブラウザでジッターが発生します変換スケ...
最も人気のあるフロントエンド フレームワークの 1 つとして、Vue は多くのフロントエンド開発エン...
この記事では、WeChatアプレットでビデオプレーヤーの集中砲火を実装するための具体的なコードを参考...
1 はじめにKong は単純な製品ではありません。この記事で言及されている Kong は主に Kon...
この記事では、Windows に MySQL 5.7 圧縮パッケージをインストールする方法について説...
この記事では、MySQL 5.7.17 winx64解凍版のインストールと設定方法を紹介します。具体...
01. 概要絶対パスと相対パスはシェル環境でよく使用され、それぞれに独自の用途があります。相対パスの...
導入Dockerfile ビルドの実行は、単一のコンテナの手動操作です。マイクロサービス アーキテク...
ある達人がかつて、自分の妻のことを知るのと同じくらい、自分が管理するデータベースのことを知るべきだと...
私は長い間この問題に悩まされていましたが、検索してみたところ、実際にこの問題を解決した人がいることが...
目次JavaScript オブジェクト1. 定義2. オブジェクトの分類3. オブジェクトを定義する...
実際、この問題は、HTML の select タグを初めて学んだときにすでに発生していました。今日に...
最初にsudo suコマンドを使用して root アカウントに切り替えることをお勧めします。そうしな...
による写真に示されている効果を例に挙げてみましょう。明らかに、「次へ」というテキストを水平方向だけで...