这个CSS怎么写?带斜边

html-css07

这个CSS怎么写?带斜边,第1张

代码如下:

html:

<div id="div3">

<div class="arrow-top"></div>

</div>

css:

#div3 {

position: relative

width: 300px

height: 200px

background-color: yellow

}

.arrow-top {

position: absolute

top: -50px

left: -50px /*移动距离为小三角的宽高*/

width: 0px

height: 0px

border-width: 50px /*小三角的高度*/

border-style: solid

border-color: transparent transparent #C73837 transparent /*朝上的小三角*/

transform: rotate(-45deg) /*将小三角旋转到你想要的角度*/

}

你可以根据自己的需要进行微调

斜角包角效果_有道翻译

翻译结果:

The bevel Angle effect

bevel_有道词典

bevel

英 ['bev(ə)l]

美 ['bɛvl]

n. 斜角;斜面;[测] 斜角规

n. (Bevel)人名;(英)贝弗尔

adj. 成斜面的

vt. 使成斜角;使成斜面

vi. 成斜角;把切成或磨成斜边或斜角

DIV里没有和PS一样的斜切。可以先把矩形CTRL+Q转曲。然后按F10对每个节点进行调整。

DIV在编程中又叫做整除,即只得商的整数。 DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。