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 クラスター プロジェクトをすばやく構築する方法を説明します。

推薦する

UbuntuにCMakeをインストールするいくつかの方法の詳細な説明

CMakeをインストール sudo apt をインストール cmake この方法はインストールが簡単...

PhpStormがVirtualBoxに接続できない問題を解決する

問題の説明: phpstorm の SFTP ホストを 192.168.122.1 に設定すると、接...

Markodwnによるタイトル配置による同期スクロールのアイデアの詳細な説明

序文私が作成中の Markodwn エディターに同期スクロール機能を追加する必要があります。Baid...

RedisとMemcacheの比較と選び方

最近 redis を使っていて、とても便利だと感じているのですが、インメモリ データベースを選択する...

CentOS システムの rpm インストールと Nginx の設定

目次CentOS rpm のインストールと Nginx の設定導入rpm パッケージのインストールサ...

ウェブサイトのアクセス速度を向上させるための徹底的な最適化に関するヒント

ウェブサイトのアクセス速度を向上させるための徹底的な最適化に関するヒント。ウェブサイトのアクセス速度...

Reactでカスタムフックを作成する方法を教えます

1. カスタムフックとは何かロジックの再利用簡単に言えば、カスタム フックを使用すると、特定のコンポ...

mysql 5.7.20 win64 のインストールと設定方法

mysql-5.7.20-winx64.zipインストール手順のないインストール パッケージ: ht...

Linux echo テキスト処理コマンドの使用法と例

Linux ヘルプ ドキュメントでの echo の説明は、Python や Java などのプログラ...

Vueはスクロールロードテーブルを実装します

目次成果を達成する転がり荷重知識備蓄コンポーネントのパッケージ1. コンポーネントの命名2. 小道具...

MySQL 5.7 解凍版のインストール、アンインストール、および文字化けしたコードの問題のグラフィック解決

1. 解凍版のインストール(1)圧縮パッケージをダウンロードし、ディスクの場所に解凍します。圧縮パッ...

シャドウソックスを使用してLAN透過ゲートウェイを構築する

目次dnsmasq をインストールして設定するChinaDNS をインストールして設定するshado...

Vue は小数点付きの星評価を実装します

この記事では、小数点付きの星評価を実装するためのVueの具体的なコードを参考までに共有します。具体的...

Docker で MySQL クラスターを構築する方法の例

Docker の基本的な手順:アップデートパッケージ yum -y アップデートDocker仮想マシ...

ウェブページの幅を携帯電話の画面(ビューポート)の幅に自動的に適応させる実装コード

一般的な書き方は次のとおりです。 XML/HTML コードコンテンツをクリップボードにコピー<...