2

これは私を狂わせています、私は以前にそれを見ましたが、それを複製することも、それまたはそれのためのリソースを見つけることもできません。私がやっていることは、革の質感と「ステッチパターン」を備えた縦型のリボンです。:afterステッチの仕組みは非常にシンプルで、内側のdivは破線の境界線で、リボンの形状も疑似クラスを使用すると十分に簡単ですが、2つを組み合わせるのは計画的ではありません。

これは私がこれまでに機能しているcssのために持っているものです（それはすべてcssから革の質感を引いたもので行われます）：

.wrapleather {
        width:100px;
        height:120px;
	    float: right;
	    margin-right:20px;
        background-image : url("leather.png");
        border-radius: 5px;
        -webkit-box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
        -moz-box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
        box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
	    position:relative;
    }
    .wrapleather:after {
    	content: '';
        display: block;
        width: 0;
        height: 105px;
        position: absolute;
        top: 0;
        left: 0;
        border-width: 0 50px 15px 50px;
        border-style: solid;
        border-color: transparent transparent #cdc0a8;
	    position:absolute;
    	top:0;
    	left:0;
    }
    .wrapleather .outside {
    	width:90px;
    	height:110px;
        margin: 4px;
        border-radius: 5px;
        border: 1px dashed #aaa;
        box-shadow: 0 0 0 1px #f5f5f5;
    	}
    .wrapleather .inside {
        width:90px;
        height:110px;
        border-radius: 5px;
     }
<div class="wrapleather">
     <div class="outside">
       <div class="inside">
        <p class="font">Leather</p>
       </div>
     </div>    
  </div>

さらに、影は「正方形」の形式のままであり、すべての形をとっていません。明確にするために、私は誰にもデバッグなどを求めていません。目的の結果を達成できる代替またはさらなる方法を共有するように求めているだけです。cssはまだ学習中のものなので、アドバイスやあなたが与えることができるその性質はありがたいです、そしてあなたが追加情報を必要とするならば、私に知らせてください。ありがとう！

4

2 に答える 2

7

CSSだけでやりたいことをする方法はありますが、すべてのブラウザで機能するとは限りません。最高のブラウザサポートが必要な場合は、おそらく画像を使用する必要があります。

これがデモです（スタイリングのためだけに追加のマークアップを導入するべきではないので、単一の要素のみを使用していることに気付いたかもしれません）：http: //jsfiddle.net/joshnh/eUje5/

HTML

<div class="ribbon"></div>

</ p> 

CSS

.ribbon {
    background: #eee;
    border-left: 1px dashed #aaa;
    border-right: 1px dashed #aaa;
    border-radius: 5px 5px 0 0;
    box-shadow: 5px 0 0 #eee,
                -5px 0 0 #eee;
    height: 120px;
    margin: 0 5px;
    position: relative;
    width: 90px;
    -webkit-filter: drop-shadow(0 2px 5px hsla(0,0%,0%,.5));
}
.ribbon:after,
.ribbon:before {
    border-top: 15px solid #eee;
    content: '';
    height: 0;
    position: absolute;
    top: 100%;
    width: 0;
}
.ribbon:after {
    border-left: 50px solid transparent;
    right: -6px;
}
.ribbon:before {
    border-right: 50px solid transparent;
    left: -6px;
}
于 2012-08-29T05:36:24.557 に答える
0

そのため、気を失うことなく、このリボン効果がWebkit固有のフィルターに依存せずに最新のブラウザーで実際に可能であることを確認したかったのです。ですから、これは後でこれに出くわすすべての人のためのものです。

をモデル化する方法にもっと熱心に取り組む必要がありますbox-shadows。

:before幅を大きくする場合は、:after要素を回転および傾斜させる角度を後で小さくする必要があることに注意してください。

例：

.ribbon {
    background: #eee;
    border-left: 1px dashed #aaa;
    border-right: 1px dashed #aaa;
    border-top: 1px dashed #aaa;
    box-shadow: 5px 0 0 #eee,
                -5px 0 0 #eee,
                0 -5px 0 #eee,
                5px -5px 0 #eee,
                -5px -5px 0 #eee,
                5px 1px 5px 5px #888;
    height: 120px;
    margin: 10px 5px 0 5px;
    position: relative;
    width: 90px;
    z-index: 3;
}
.ribbon:after,
.ribbon:before {
    content: '';
    position: absolute;
    top: calc(100% - 1px);
    width: calc(50% + 1px);
    border-bottom: 1px dashed #aaa;
}
.ribbon:after {
    transform: rotateZ(20deg) skewX(20deg) translateY(-2px);
    transform-origin: top right;
    right: -1px;
    height: 40px;
    background-color: #eee;
    border-right: 1px dashed #aaa;
    box-shadow: 5px 0 0 #eee,
                0 5px 0 #eee,
                5px 5px 0 #eee,
                15px 15px 5px -5px #888,
                0 15px 5px -5px #888,
                15px 0 5px -5px #888;
}
.ribbon:before {
    transform: rotateZ(-20deg) skewX(-20deg);
    transform-origin: top left;
    left: -1px;
    height: 40px;
    background-color: #eee;
    border-left: 1px dashed #aaa;
    box-shadow: -5px 0 0 #eee,
                0 5px 0 #eee,
                5px 5px 0 #eee,
                15px 15px 5px -5px #888,
                0 15px 5px -5px #888;
}
<div class="ribbon"></div>

于 2015-03-05T16:11:37.567 に答える