前端优
我用我的双手去成就我的梦想,我将遵循此道直至终结!
首页 > html+css >正文

css盒子案例

发布时间:2024-08-11 23:59 作者:一友画

案例1

 

案例代码示例:

<style type="text/css">
div{width: 50px;height: 50px;border-top: 50px solid #0f0;border-left: 50px solid #f00;border-right: 50px solid #00f;border-bottom: 50px solid #ffc0cb;}
</style>
<div></div>

案例2

 

案例代码示例:

<style type="text/css">
div{width: 0px;height: 0px;border-top: 50px solid #0f0;border-left: 50px solid #f00;border-right: 50px solid #00f;border-bottom: 50px solid #ffc0cb;}
</style>
<div></div>

案例3

 

案例代码示例:

<style type="text/css">
div{width: 0px;height: 50px;border-top: 50px solid #0f0;border-left: 50px solid #fff;border-right: 50px solid #fff;border-bottom: 50px solid #fff;}
</style>
<div></div>

案例4

 

案例代码示例:

<style type="text/css">
div{width: 0px;height: 50px;border-top: 50px solid #0f0;border-left: 50px solid #f00;border-right: 50px solid #00f;border-bottom: 50px solid #fff;}
</style>
<div></div>

案例5

 

案例代码示例:

<style type="text/css">
div{width: 0px;height: 0px;border-top: 50px solid #6495ed;border-right: 50px solid #ff0;border-bottom: 50px solid #7fffd4;}
</style>
<div></div>

以上内容,在整理时难免有疏漏错误之处,如有发现,可以通过顶部的“联系站长”提出反馈,感谢您的支持!