私はhtmlの下のイメージのような推薦を作成したい

-4

htmlのこのタイプの推薦を作成する方法を助けてください。私はhtmlの下のイメージのような推薦を作成したい

enter image description here

2017-07-02 Abhishek Dutta

は3つのdivを作成し、私はこのJSFiddle

CSSをチェックし、迅速なHTML構造をしました。 divを45度に回転します。あなたはあなたが望むものを得るでしょう –

あなたはCSS擬似要素を使ってそれを作成することができます（：後：前または）。

.profile { 
    width: 200px; 
    height: 200px; 
    display: block; 
    color: rgba(0, 0, 0, 0); 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg); 
    margin: 80px; 
    overflow: hidden; 
} 

.profile::before { 
    content: ""; 
    position: absolute; 
    width: 640px; 
    height: 393px; 
    top: -100px; 
    left: -200px; 
    z-index: -1; 
    background: url(https://cdn.pixabay.com/photo/2017/06/26/15/00/seascape-2444040_640.jpg); 
    -webkit-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
}

HTML：：

<div class="profile"> 
    <!-- Overlay div content goes here --> 
</div>

出典

2017-07-02 08:31:17

ありがとう。これは本当に私にとって助けになります。（y） –

私の提供する解決策があなたを助けたなら、私の答えを投票して、受け入れられた答えとしてマークしてください。乾杯！ –

私はhtmlの下のイメージのような推薦を作成したい

答えて

関連する問題