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

推薦する

iframe パラメータの説明と例

<iframe src=”test.jsp” width=”100″ height=”50″ ...

JS配列の次元削減のいくつかの方法の詳細な説明

2次元配列の次元削減配列インスタンスメソッド concat と ES6 スプレッド演算子を使用した次...

Ansible を使用した Nginx のバッチ デプロイのサンプル コード

1.1 nginxインストールパッケージとインストールスクリプトをクライアントにコピーし、スクリプト...

MySQL UPDATE ステートメントの非標準実装コード

今日は、MySQL データベースと SQL 標準 (および他のデータベース) の UPDATE ステ...

Linux で AutoFs マウント サービスをインストールするチュートリアル

Samba サービスでも NFS サービスでも、サーバーの起動時にリモート共有リソースが自動的にマ...

CentOS ベースの OpenStack 環境の展開に関する詳細なチュートリアル (OpenStack のインストール)

エフェクト表示: 環境準備コントローラーノード: 6GB 4時間60GB/30GB/30GB計算ノー...

Linuxドライバのプラットフォームバスの詳細説明

目次1. プラットフォームバスの紹介1.1. Linuxドライバの分離と階層化1.1.1. Linu...

例を通してBRタグとPタグの違いを理解する

<br />改行タグの使用<br>改行タグ<br>は終わりのない...

MYSQLデータベースの最適化段階を簡単に理解する

導入面接官がこんな質問をしたことはありませんか?データベースをどのように最適化しますか?では、この質...

MySQL マスター/スレーブ データベース同期構成と一般的なエラー

アクセス回数が増えると、時間のかかるデータベース読み取り操作では、データベースへの負荷を軽減するため...

Net Core実装プロセス分析のDoc​​kerインストールと展開

1. Dockerのインストールと設定 #CentOS をインストールし、Docker パッケージを...

JSキャンバスは描画ボードと署名ボードの機能を実現します

この記事では、お絵かきボード/サインボード機能を実現するためのJSキャンバスの具体的なコードを参考ま...

MySQL でのログインを取り消す

コンセプト紹介: MySQL の redo ログにはトランザクションの動作が記録されることはご存じの...

タブバーのいくつかの実装方法(推奨)

タブ: カテゴリ + 説明タグバー: カテゴリ => ユーザーに現在地と目的地を知らせる1. ...