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

推薦する

Windows 10にWSL2 Ubuntu20.04をインストールしてdocker環境を構築する方法

WSLを有効にするシステムがWindows 10 2004以降であることを確認してください 「メニュ...

JavaScript は、マウスがテーブル行を通過するときに色の識別を実装します。

この記事では、マウスがテーブルの行を通過するときにJavaScriptを使用して色ラベルを表示する方...

Linux の検索ツールの代替となるフレンドリーなツール

find コマンドは、指定されたディレクトリ内のファイルを検索するために使用されます。引数の前の文字...

一般的なブラウザのユーザーエージェントの概要

1. 基礎知識: HTTP ヘッダー ユーザーエージェントユーザー エージェントは、ユーザー エージ...

JavaScript で 9 グリッドのモバイル パズル ゲームを実装

この記事では、Jiugonggeモバイルパズルゲームを実装するためのJavaScriptの具体的なコ...

Dockerはコンテナにポートを動的に公開します

コンテナのIPアドレスを表示するdocker examine <コンテナ名またはID> ...

Vueドロップダウンリストの2つの実装方法の比較

Vueドロップダウンリストの2つの実装最初の方法はv-forを使用する <el-select ...

MySQL サービスを起動できない問題の解決策を含む MySQL 5.7.17 インストール チュートリアル

.net 開発に関しては、Microsoft の SQL Server データベースに精通しており、...

Vue3 プロジェクトで WeChat 認証ログインをエレガントに実装する方法

目次序文準備する実装のアイデアコードについて要約する序文WeChat 認証ログインは、WeChat ...

Windows システムに mysql5.7.21 をインストールするための詳細なチュートリアル

MySQL インストーラーは、MySQL ソフトウェアのあらゆるニーズに対応する、使いやすいウィザー...

HTMLはa要素hrefのURLリンクを自動的に更新したり新しいウィンドウを開いたりする機能を実装する

場合によっては、次のような機能を実装したいことがあります。リンクをクリックします。リンクがブラウザで...

MySQL sql_mode の変更が有効にならない理由と解決策

目次序文シナリオシミュレーション要約する序文最近、sql_mode の話題については何度も話し合われ...

mysql5.7 ユーザー権限の作成、ユーザーの削除、権限の取り消し

1. ユーザーを作成します。注文: 'password' によって識別される ...

MySQL パーティションテーブルの正しい使用方法

MySQL パーティションテーブルの概要数億、あるいは数十億ものレコードを格納するテーブルに遭遇する...

ユーザー名が使用可能かどうかを確認するVueメソッド

この記事では、ユーザー名が使用可能かどうかを確認するためのVueの具体的なコードを例として紹介します...