如何創建與CSS3僞類

我試圖創建一個使用引導程序看起來像這樣的圖像如何創建與CSS3僞類

這是我已經走了多遠的屏幕截圖中的元素的自定義形狀

我從來沒有在僞類上工作，我發現很難得到確切的形狀。請看看我的代碼，並幫我弄明白。我在這裏只包含了第二個（在屏幕截圖的右側）剪貼板的代碼。

HTML

<div class="col-xs-12 col-sm-6"> 
    <div class="clip"> 
      <div class="circle"></div> 
    </div> 

    <div class="pad">   
      <div class="paper"></div>  
    </div> 
</div>

CSS

.clip, .circle{ 
    position: relative; 
} 

.clip::after, .clip::before, circle:after, .circle:before{ 
    display: block; 
    position: absolute; 
    content: ""; 
    z-index: 50; 
} 

.clip:before{ 
    top: 12.5px; 
    left: 15%; 
    width: 70%; 
    border-bottom: solid 50px grey; 
    border-left: solid 150px transparent; 
    border-right: solid 150px transparent; 

} 

.clip:after{ 
    top: 60px; 
    left: 15%; 
    width: 70%; 
    border-bottom: solid 55px grey; 

    border-top-left-radius: 10px; 
    border-top-right-radius: 10px; 

    border-bottom-left-radius: 5px; 
    border-bottom-right-radius: 5px; 
} 

.circle:before{ 
    top: 10px; 
    left: 70%; 
    width: 20%; 
    height: 50px; 
    border-radius: 50%; 
    border-right: solid 150px yellow; 
}

來源

2016-07-06 Chandan D Nadig

爲什麼你不使用背景圖片？您可以縮放該背景以適應所有分辨率，並且不需要使用純CSS來製作這些圖形。有時候不是使用CSS進行創建的最佳選擇。 –

由於圖像花費較長的時間才能加載速度較慢的連接，我的頁面主要是這種佈局，我不想冒這個機會。我一定會認爲這是一個選項。但是，您能否提出一個CSS解決方案，以便我至少可以獲得更多的知識 –

使用CSS來完成這是一項艱鉅的任務，所以我可以幫助您，但我會失去這麼多時間。但是，現在我無法實現這種形狀的灰色形狀。我只能想象，帶有邊框半徑和45度灰色框的形狀在帶有隱藏溢出的透明框內旋轉，從而切割邊框和底部。但是純粹的CSS形狀我無法用它做到。另一個艱鉅的任務是在紙張中間的對角線漸變。 –

因爲沒有SVG標籤，我會用僞&梯度去：

div { 
 
    position:relative; 
 
    float:left; 
 
    margin:60px 60px 80px; 
 
    width:180px; 
 
    height:200px; 
 
    border-radius:15px; 
 
    background:white; 
 
    box-shadow:/* draw inside part of border */0 0 0 20px #159E91, inset -1px -1px 1px; 
 
} 
 
div:before {/*to draw outside part of border with same radius inside/out */ 
 
    z-index:-1; 
 
    border-radius:20px; 
 
    content:''; 
 
    border: 20px solid #159E91; 
 
    position:absolute; 
 
    top:-30px; 
 
    left:-30px; 
 
    right:-30px; 
 
    bottom:-30px; 
 
    box-shadow:0 -2px 2px rgba(30, 162, 149, 0.2), 0 0 2px white, 0 5px 5px -3px rgba(0,0,0,0.5) 
 
} 
 
div:after {/* draw gradient underneath clipper */ 
 
    content:''; 
 
    position:absolute; 
 
    top:0; 
 
    border-radius: 0 15px 0 0; 
 
    left:26px; 
 
    width:152px; 
 
    height:150px; 
 
    background: 
 
    linear-gradient(45deg, white 40%, rgba(255,255,255,0) 40%),/* mask*/ 
 
    linear-gradient(-45deg, white , transparent 70%),/* mask*/ 
 
    linear-gradient(to right , rgba(0,0,0,0.25) , rgba(0,0,0,0.15)),transparent ; 
 
} 
 
.clipper {/* hold clipper shape actually */ 
 
    display:block; 
 
    width:128px; 
 
    height:80px; 
 
    margin: -52px auto 30px; 
 
    position:relative; 
 
    z-index:1; 
 
    overflow:hidden; 
 
} 
 
.clipper b {/* show the clipper shape */ 
 
    border-radius:35px; 
 
    position:absolute; 
 
    height:150%; 
 
    width:100%; 
 
    box-shadow: 0 0 1px 1px gray; 
 
    left:50%; 
 
    top:-12px; 
 
    transform-origin:0 0; 
 
    transform:rotate(45deg); 
 
    overflow:hidden; 
 
    } 
 
.clipper b:before {/* draw the hoe and paint around it */ 
 
    content:''; 
 
    display:block; 
 
    border-radius:100%; 
 
    height:29px; 
 
    width:29px; 
 
    margin:20px; 
 
    box-shadow:inset -1px -1px 1px gray, 0 0 0 100px #3B3B3B, inset 1px 1px 2px rgba(0,0,0,0.5); 
 
} 
 

 
/* to match fake picture's text */ 
 
.clipper ~ span { 
 
    display:block; 
 
    background:#353535; 
 
    margin:10px 58px; 
 
    padding:5px; 
 
    position:relative; 
 
    z-index:1; 
 
} 
 
.clipper ~ span:last-of-type { 
 
    display:block; 
 
    background:#353535; 
 
    margin:10px 85px 10px 58px; 
 
}

<div> 
 
    <span class="clipper"><b></b></span> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
</div>

但是這真的只是一個形狀的CSS，其中一個圖像或一個SVG會做的很好的設計。

你可以在這裏玩：http://codepen.io/gc-nomade/pen/rLYYZx

來源

2016-07-12 19:47:57

你是一個天才 –

我做了設計的一些改變。現在我已經有了這麼多，我想堅持使用CSS。小提琴：http://jsfiddle.net/chandannadig/3kjdo9rr/10/。你能幫我讓剪輯器響應嗎？ –

https://jsfiddle.net/ahe128/esmrLzuv/5/

我做了，但這是真的辛苦的工作，我會嘗試完成這個:)

.clip, 
.circle { 
    position: relative; 
} 

.clip::after, 
.clip::before, 
circle:after, 
.circle:before { 
    display: block; 
    position: absolute; 
    content: ""; 
    z-index: 50; 
} 

.clip:before { 
    top: 1rem; 
    left: 10%; 
    width: 20%; 
    border-bottom: solid 50px grey; 
    border-left: solid 150px transparent; 
    border-right: solid 150px transparent; 
} 

.clip:after { 
    top: 4.65rem; 
    left: 10%; 
    right:10%; 
    width: 82%; 
    border-bottom: solid 4.3rem grey; 
    border-top-left-radius: 0.8rem; 
    border-top-right-radius: 0.8rem; 
    border-bottom-left-radius: 0.4rem; 
    border-bottom-right-radius: 0.4rem; 
} 

.circle:before { 
    top: 0.78rem; 
    height: 1px; 
    width:1px; 
    border-radius: 50%; 
    border: solid 25px white; 
    z-index:100; 
    left:47% 
}

來源

2016-07-07 13:37:00 ahe

謝謝啊，請看看我的答案和小提琴。出於某種原因，代碼只能在我的瀏覽器上運行，但不能在小提琴上運行。 –

如果您遇到大小問題，可以嘗試以下解決方案這是引導功能 hidden-xs或hidden-sm exc。例如，您製作兩個形狀，其中一個（對於lg，sm md）類「col-md-12 hidden-xs」，另一個（對於xs）類是「col-xs-12 hidden-sm hidden- lg隱藏-...「我之前在我的項目中使用它，它是尺寸問題的好辦法有時引導程序的大小設置不工作我們的設計，我認爲這個解決方案是最好的:) – ahe

最後.......我得到它的工作（除了對角線梯度）。但它還沒有響應。我的目標是保持每個剪貼板的設計完整，並將它們疊放在小屏幕中。有人可以指出我錯過了它！

此外，如果有更好的方法在Pure CSS那麼我很樂意看到它。

小提琴：https://jsfiddle.net/chandannadig/esmrLzuv/7/

/*Clip*/ 
.clip, .circle{ 
    position: relative; 
} 

.clip::after, .clip::before, circle:after, .circle:before{ 
    display: block; 
    position: absolute; 
    content: ""; 
} 

.clip:before{ 
    z-index: 50; 
    top: 1rem; 
    left: 6.958rem; 
    width: 29rem; 
    border-bottom: solid 4rem grey; 
    border-left: solid 11.5rem transparent; 
    border-right: solid 11.5rem transparent; 

} 

.clip:after{ 
    top: 4.7rem; 
    left: 6.958rem; 
    width: 29rem; 
    z-index: 50; 
    border-bottom: solid 4rem grey; 

    border-top-left-radius: 0.8rem; 
    border-top-right-radius: 0.8rem; 

    border-bottom-left-radius: 0.5rem; 
    border-bottom-right-radius: 0.5rem; 
} 

.circle{ 
    position: absolute; 
    z-index: 60; 
    top: 0.4rem; 
    left: 15.6rem; 
    width: 12rem; 
    height: 8rem; 
    background: grey; 
    border-radius: 50%; 
} 

.circle::before{ 
    z-index: 60; 
    top: 1rem; 
    left: 4.2rem; 
    width: 3.5rem; 
    height: 3.5rem; 
    background: white; 
    border-radius: 50%; 
} 
/*End of Clip*/

來源

2016-07-07 14:14:30

如何創建與CSS3僞類

回答

相關問題