css怎么实现小的倒三角

css怎么实现小的倒三角,第1张

如果想用css 弄出个倒三角的话, 只能使用border了, 可以这样写, 写一个div 宽高都是0px , 把border其他都设置成10px solid transparent;再把border-top:10px solid red; 这样看起来 就能挤成个倒三角 比如::: <div style="width:0px;height:0px;border-top:100px solid red;border-left:150px solid transparent;border-bottom:50px solid transparent;border-right:150px solid transparent;"></div>

任意标签中插入 style="cursor:hand"
多种形状可供选择
hand是手型
pointer也是手型,这里推荐使用这种,因为这可以在多种浏览器下使用。
crosshair是十字型
text是移动到文本上的那种效果
wait是等待的那种效果
default是默认效果
help是问号
e-resize是向右的箭头
ne-resize是向右上的箭头
n-resize是向上的箭头
nw-resize是向左上的箭头
w-resize是向左的箭头
sw-resize是左下的箭头
s-resize是向下的箭头
se-resize是向右下的箭头
auto是由系统自动给出效果

一、样式

polygon{

float:left;

width:100px;

height:100px;

background-color:#000;

shape-outside:polygon(100px 0,100px 80px,0px 80px);

-webkit-clip-path:polygon(100px 0,100px 80px,0px 80px);

}

二、div

<div class="polygon"></div>

/////可根据自己的需要调整样式


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/13365426.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-22
下一篇 2023-07-22

发表评论

登录后才能评论

评论列表(0条)

保存