《CSS揭秘》：菱形圖片

GraphQuery 發(fā)布于2019-08-29 11:19 / 785人閱讀

摘要：菱形圖片在網(wǎng)頁設(shè)計(jì)中，把圖片裁切成菱形主要有兩種方法。圖片需要擴(kuò)大倍去填滿整個(gè)菱形區(qū)域裁切路徑在線編輯使用元素嵌套方案雖然可以實(shí)現(xiàn)目的，但是兼容性并不好，如果圖片不是正方形，結(jié)果就會(huì)嚴(yán)重變形。

菱形圖片

在網(wǎng)頁設(shè)計(jì)中，把圖片裁切成菱形主要有兩種方法。一種是基于元素嵌套方案，另外一種是裁切路徑方案

元素嵌套方案在線編輯

將圖片用一個(gè)

包裹起來，對(duì)這個(gè)

變形，然后對(duì)圖片應(yīng)用相反的變形。

.picture{
    width: 250px;
    height: 250px;
    transform: rotate(45deg);
    overflow: hidden;
}
.picture > img{
    max-width: 100%;
    transform: rotate(-45deg) scale(1.42);//圖片需要擴(kuò)大1.42倍去填滿整個(gè)菱形區(qū)域
}

裁切路徑在線編輯

使用元素嵌套方案雖然可以實(shí)現(xiàn)目的，但是兼容性并不好，如果圖片不是正方形，結(jié)果就會(huì)嚴(yán)重變形。另一種方法是使用裁切路徑屬性clip-path。
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

GPU云服務(wù)器云服務(wù)器圖片css css圖片自適應(yīng) 分頁圖片界面css數(shù)據(jù) webuploader圖片css數(shù)據(jù)庫

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/111567.html

相關(guān)文章

css揭秘筆記——形狀

摘要：把改成，就變成了這樣實(shí)現(xiàn)邊框內(nèi)圓角多重邊框還有下實(shí)現(xiàn)多重背景為某一層背景單獨(dú)設(shè)置類似這樣的屬性等等。裁切路徑方案這種方案，當(dāng)內(nèi)邊距不夠?qū)挄r(shí)，會(huì)裁切掉文本。自適應(yīng)的橢圓（border-radius的用法）單獨(dú)指定水平和垂直半徑長寬固定的元素，可以通過指定寬高的一半，變?yōu)闄E圓形，格式為兩個(gè)值用/分開。 width: 100px; height: 80px; border-radi...

dantezhao 2019-08-29 13:47 評(píng)論0 收藏0
《css揭秘》讀書筆記

摘要：但是根據(jù)本司機(jī)兩年的開發(fā)經(jīng)驗(yàn)來看，在實(shí)際開發(fā)中很少來使用這個(gè)單位。由于基本都是一些實(shí)用性的技巧，我就不一一列舉了，建議自讀。很好很實(shí)用的一本書。第一章引言 css編碼技巧在引言中，作者提到使用em與inherit來實(shí)現(xiàn)css代碼的簡潔與可維護(hù)性。但是根據(jù)本司機(jī)兩年的開發(fā)經(jīng)驗(yàn)來看，在實(shí)際開發(fā)中很少來使用em這個(gè)單位。如何用以及何時(shí)去使用，還是要根據(jù)實(shí)際開發(fā)需求來定吧，畢竟這兩個(gè)屬性...

xiguadada 2019-08-29 16:28 評(píng)論0 收藏0
css-secrets (css揭秘) 知識(shí)點(diǎn)目錄，值得深入學(xué)習(xí)！

摘要：通過模糊來弱化背景和滾動(dòng)提示使用兩層背景，控制交互式的圖片對(duì)比控件范圍輸入控件方式書中有很詳細(xì)的解答提醒自己要回顧。 1. 第一章 css編碼技巧第二章邊框與背景半透明邊框 hsla 多重邊框 box-shadow outline 靈活的背景定位 background-position css3該屬性可以指定偏移量，////bac...

DevWiki 2019-08-30 15:56 評(píng)論0 收藏0
[CSS]《CSS揭秘》第三章——形狀

摘要：自適應(yīng)橢圓斜杠前為水平半徑，后為垂直半徑。和下特有的，用于在渲染中向元素邏輯上的頭部或尾部添加內(nèi)容。所以不要用或展示有實(shí)際意義的內(nèi)容，盡量使用它們顯示修飾性內(nèi)容，例如圖標(biāo)。和必須配合屬性來使用，用來定義插入的內(nèi)容，必須有值，至少是空。自適應(yīng)橢圓 border-radius:50% / 50%;//斜杠前為水平半徑，后為垂直半徑。 background: #fb3; b...

ysl_unh 2019-08-30 15:53 評(píng)論0 收藏0
前端每日實(shí)戰(zhàn)：45# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)菱形 loader 動(dòng)畫

摘要：效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽?？山换ヒ曨l教程此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbbYsU?w=500&h=500); 效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。 https://codepen.io/comeh...

MarvinZhang 2019-08-29 15:38 評(píng)論0 收藏0