具体的なコードは次のとおりです。 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 レイヤーを配置できます。
この記事では、MySQL 8.0のダウンロードとインストールについてご紹介します。具体的な内容は以下...
クエリで EXPLAIN を実行するとデータベースが変更されるかどうかを尋ねられた場合、おそらく「い...
iframeを更新する方法1. 更新するには、JavaScriptのdocument.fr.loca...
序文:私はずっと、SQL 文がどのように、どのような順序で実行されるのかを知りたいと思っていました。...
今日はたまたま友人のサーバーの移転を手伝うことになり、サーバーの基本的な設備の設定を行ったのですが、...
目次Linux の MariaDB データベースについて1. データベースとは何ですか? 2. デー...
目次Vue での this.$set の使用使用なぜレスポンシブなのか?分析する要約するVue での...
目次1. 主キーが存在する2. 主キーはないが、一意のインデックスが存在する3. 共同主キーまたは共...
AND キーワードを使用した MySQL 複数条件クエリ。MySQL では、AND キーワードを使用...
目次開発環境ゲームエンジンのコンセプトCocos Creatorについてプロジェクト構造コード編集環...
序文ActiveMQ は、Apache が開発した最も人気があり強力なオープン ソース メッセージ ...
データ表示は、常にあらゆる職業の人々が求めているものです。特にフロントエンド開発業界では、データを表...
これらはすべて海外のE-WebTemplates WebサイトからのWebページテンプレートであり、...
序文データベース操作では、同時データ読み取りの正確性を効果的に保証するために、トランザクション分離レ...
この記事の例では、WeChatアプレットでテキストスクロールを実装するための具体的なコードを参考まで...