简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
css3 - 这个形状使用CSS怎么写出来？
黄舟
黄舟 2017-04-17 11:53:51
0
3
626

  1. 这个形状使用css3怎么写出来，我不想使用背景图实现这个效果。

2.右侧的圆角怎么实现？

黄舟
黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

répondre à tous (3)
洪涛
洪涛2017-04-17 11:55:51 3 plancher 
p { width: 200px; height: 100px; border-radius: 0 20px 30px 0; background: #ccc; transform: scale(1.1, 1.3) perspective(.5em) rotateX(5deg); transform-origin: bottom left; }

差不多这意思吧，用transform转了个角度，推荐用作伪元素垫在底下

补个链接

Comme+0
Ajouter une réponse
    黄舟
    黄舟2017-04-17 11:55:51 2 plancher 
    p{ width:300px; height:50px; border-radius: 5px; background-color: #da8; transform: skew(15deg,0); }

    自己补充一些厂商前缀，如果要兼容的话

    Comme+0
    Ajouter une réponse
      黄舟
      黄舟2017-04-17 11:55:51 1 plancher 
      transform:skew(30deg,20deg); -ms-transform:skew(30deg,20deg); /* IE 9 */ -moz-transform:skew(30deg,20deg); /* Firefox */ -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */ -o-transform:skew(30deg,20deg); /* Opera */

      skew 这个参数，前面都是前缀

      Comme+0
      Ajouter une réponse
        Sujets populaires
        Plus>
        Articles populaires
        Tutoriels populaires
        Plus>
        Tutoriels associés
        Recommandations populaires
        Derniers cours
        Derniers téléchargements
        Plus>
        effets Web
        Code source du site Web
        Matériel du site Web
        Modèle frontal
        À propos de nous Clause de non-responsabilité Sitemap
        Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！