CSS 配送先住所平行四辺形線スタイルの例コード

CSS 配送先住所平行四辺形線スタイルの例コード

コードは次のようになります。

// 配送先住所の平行四辺形の線のスタイル <view class="top"></view>
	
	//スタイル .top{
		背景色: #fff;
    	位置: 相対的;
	}
	.top:前{
		位置: 絶対;
	    右: 0;
	    下部: 0;
	    左: 0;
	    高さ: 2px;
	    背景: repeating-linear-gradient(-45deg,#ff6c6c,#ff6c6c 20%,transparent 0,t​​ransparent 25%,#1989fa 0,#1989fa 45%,transparent 0,t​​ransparent 50%);
	    背景サイズ: 80px;
	    コンテンツ: "";
} 

ここに画像の説明を挿入

追記:CSSは配送先住所の下の平行四辺形の色付きの線を実現します

<div class="xiantiao">
  <div class="city" style="margin-left:8px;"></div>
  <div class="city"></div>
  <div class="city"></div>
  <div class="city"></div>
  <div class="city"></div>
  <div class="city"></div>
  <div class="city"></div>
  <div class="city"></div>
  <div class="city"></div>
  <div class="city"></div>
  <div class="city"></div>
  <div class="city"></div>
  <div class="city" style="margin-right:0px;"></div>
</div>
<スタイル>
            .xiantiao{幅:100%; 高さ:2px; オーバーフロー:非表示;}
            。市 {
              幅:36px;
              高さ:2px;
              右マージン: 23px;
              背景色: #44a5fc;
              色: #333;
              変換: skew(-45deg);
              フロート:左;
            }
</スタイル>

CSS 配送先住所平行四辺形線スタイルの例コードに関するこの記事はこれで終わりです。CSS 境界線スタイルに関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  検索テキストボックスがフォーカスを外れたときにテキストの位置がジャンプする問題の解決方法

>>:  nginx をベースにした Web クラスター プロジェクトをすばやく構築する方法を説明します。

推薦する

一般的なイベントを処理するための JavaScript の使用に関する詳細な説明

目次1. フォームイベント2. マウスイベント3. キーボードイベント4. 共通イベントメソッド(ウ...

Angularデータバインディングとその実装の詳細な説明

目次序文データバインディングとは何ですか? Angular のデータバインディングの種類一方向データ...

HTML の相対パスと絶対パスの違いの分析

HTML 初心者は、ファイルを正しく参照する方法という問題によく遭遇します。たとえば、HTML ペー...

背景位置パーセンテージ原則の詳細な説明

今日、誰かがコードを調整するのを手伝っていたとき、次のようなスタイルを見つけました。 背景位置: 5...

MySQL における ESCAPE キーワードの使用法の詳細な説明

MySQL エスケープエスケープとは、エスケープ文字の本来の意味を意味します。エスケープ文字の目的は...

Nginxドメイン名転送のhttpsアクセスの実装

事前に一言:突然、複数のドメイン名のアクセスを https に転送するというタスクを受け取りました。...

CSSブレンドモードとSVGを使用して、製品画像の色を動的に変更します。

数日前、Codepen で @Kyle Wetton が書いた、CSS ブレンディング モードと S...

MySQL メモリテーブルと一時テーブルの使用方法の詳細な説明

MySQL メモリ テーブルと一時テーブルの使用メモリテーブル: セッション 1 $ mysql -...

Dockerでイメージを削除する方法

dockerでイメージを削除するコマンドはdocker rmiですが、このコマンドを実行してもイメー...

Linuxシステムにおける仮想デバイスファイルのさまざまな実用的な使用法の詳細な説明

みなさんこんにちは。私は梁旭です。ご存知のとおり、Linux ではデバイス ファイルも含めすべてがフ...

MYSQLストアドプロシージャ、つまり一般的な論理知識のポイントの要約

MySQL ストアド プロシージャ1. ストアドプロシージャ構文(フォーマット)を作成する 区切り文...

デザイン理論: デザインにおける階層

<br />原文: http://andymao.com/andy/post/80.ht...

MySQL のロックの仕組みと使用法の分析

この記事では、例を使用して MySQL のロック メカニズムと使用方法を説明します。ご参考までに、詳...

Docker Composeでコンテナ管理の問題を解決する

Docker の設計では、コンテナは 1 つのアプリケーションのみを実行します。しかし、現在のアプリ...

純粋なCSS3で実装されたネオンライト効果

達成される効果は次のとおりです。 マウスがボタン内に移動すると、ネオンライトのような効果が生成され、...