代码如下:
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标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。