首頁猿問如圖所示，div能做平行四邊形嗎，...

如圖所示，div能做平行四邊形嗎，且不要用border做？

CSS3 Java

月關(guān)寶盒 2022-07-08 11:07:08

因?yàn)榭紤]到文本要自動(dòng)換行而字體不變形（不傾斜），如果用border做會(huì)使得字體變形

查看完整描述

2 回答

MMTTMM

TA貢獻(xiàn)1869條經(jīng)驗(yàn) 獲得超4個(gè)贊

您好，一、外部CSS樣式設(shè)置DIV寬度 - TOP
首先我們新建命名一個(gè)CLASS或ID的類，這里CSS命名為“.divcss5”，以class引用。并且設(shè)置寬度為300px，CSS選擇器代碼如下：
.divcss5{width:300px} /* css 注釋：這樣設(shè)置了對(duì)象divcss5寬度為300px樣式 */
針對(duì)DIV使用代碼：
<div class="divcss5">我寬度設(shè)置為300px</div>
二、div標(biāo)簽內(nèi)設(shè)置CSS寬度樣式 - TOP
假如這里也是對(duì)DIV標(biāo)簽設(shè)置css width為300px,div標(biāo)簽內(nèi)設(shè)置CSS樣式，我們就需要style屬性值。
直接得到HTML代碼片段：
<div style="width:300px">我寬度設(shè)置為300px</div>
三、div寬度設(shè)置代碼總結(jié) - TOP
設(shè)置DIV標(biāo)簽的寬度我們可以外部新建一個(gè)類并用class或id應(yīng)用設(shè)置其CSS樣式，也可以直接標(biāo)簽內(nèi)用style屬性應(yīng)用CSS樣式。

反對(duì) 回復(fù) 2022-07-11

肥皂起泡泡

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超6個(gè)贊

可以參考CSS的transform的skew方法

skew() 方法

通過 skew() 方法，元素翻轉(zhuǎn)給定的角度，根據(jù)給定的水平線（X 軸）和垂直線（Y 軸）參數(shù)：

實(shí)例

div{transform: skew(30deg,0deg);-ms-transform: skew(30deg,0deg);/* IE 9 */-webkit-transform: skew(30deg,0deg);/* Safari and Chrome */-o-transform: skew(30deg,0deg);/* Opera */-moz-transform: skew(30deg,0deg);/* Firefox */}