「CSS」ジグザグデザイン chrome developper tool, 携帯モード時の表示

Question

今していること

CSSにてジグザグのデザイン描写

困っていること

Google(70.0.3538.67), Opera(56.0.3051.52) develop toolの携帯バージョンで見た場合のみ下記画像のように線が表示される。
Firefox(62.03)では表示されない

iPhone, galaxyなどの実機で表示されなければ良いのですが、今環境上できないのでどうなるのか分かりません。

もしご存知の方いれば教えて頂きたいです。
よろしくお願いします

<div class="zigzag"></div>

.zigzag {
  height: 150px;
  width: 400px;
  background: linear-gradient(-135deg, #e8117f 5px, transparent 0) 0 5px, linear-gradient(135deg, #e8117f 5px, #fff 0) 0 5px;
  background-color: #e8117f;
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 10px 10px;
}

Comments

[oikashinoa]

ソース載せ忘れですか？

[x_x]

下の図はPCのChromeのデベロッパーツールでの表示ということでしょうか？ 再現しないので設定などがあれば追記願います。

[kazoogon]

画像を変更しておきました。　デベロッパーツールの携帯バージョンでのみ再現します。　ただ単にサイズを狭めても再現しません

[x_x]

再現しません

[x_x]

Chromeではないということですか？ 何で確認しているかはっきりお願いします

[kazoogon]

chromeとfirefoxのデベロッパーツール、携帯バージョンで再現します

[dit.]

倍率を125%→100%にしても再現しますか？

[kazoogon]

何パーセントでも再現しますね。。

Answer 1

各環境に対応したデザインを作成したい場合は、ご自身のパソコンに仮想環境を置くのをおすすめします。

macの場合は、XcodeでIOSの仮想環境を見ることが出来ます。
virtualboxをインストールしてgenymotionをインストールすることでAndroid端末の仮想環境を見ることが出来ます。

virtualboxダウンロードサイト：https://www.virtualbox.org/wiki/Downloads
genymotion：https://www.genymotion.com/

Answer 2

もしかして開発者用ツールで見ているから？
通常の画面で見ても同じです？

Comments

[m.ts10806]

何度も回答するのではなく、回答編集して追記された方が。
中には追記修正依頼で済むような回答もちらほらありますよ。

[oikashinoa]

回答内容の方向性が変わったと思った時に別回答を建てたんですが…
読み返すと乱立しているだけですね。反省します。

Answer 3

杞憂ではないかと

これ以上は実機で確認したほうがいいと思います。

Comments

[kazoogon]

関係無いと思いますが、一応OS情報頂いてもよろしいでしょうか？

[x_x]

画像は Windows 8.1 上の Chrome のものです

Answer 4

取り急ぎ。

以下のものならandroid chromeで下線出ませんでした。
https://www.google.co.jp/url?sa=t&source=web&rct=j&url=https://codepen.io/AndreiDodu/full/gziqn&ved=2ahUKEwjP5O2K8qDeAhVUQd4KHeFbApwQFjABegQIBxAB&usg=AOvVaw25zePx-r7CdcG4J_e6xLSR&cshid=1540446434438

Answer 5

最終回答が 表示させたい なら現状どのよう表示でおかしいか画像添付した方がいいです。

どこかのプロパティでベンダープレフィックスが必要かサボートされていないものか。

対象としているブラウザのバージョンも書いといたほうが良いのでを書かないと結論出ないので質問文直しておいてくださいね。

Answer 6

codepenなどでhtml、cssを作成して、知り合いにお店アクセスしてもらえば良いのでは？

Google, Opera develop toolの携帯バージョンで見た場合のみ下記画像のように線が表示される。

Firefoxでは表示されない
iPhone, galaxyなどの実機で表示されなければ良いのですが

表示してほしいのか欲しくないのか読み取れませんでした。

Comments

[oikashinoa]

質問文修正お疲れ様です。ギザギザの下の線を消したいって事ですね。