css制作图形

最新推荐文章于 2022-04-14 22:15:18 发布

Iris_Pumpkin

最新推荐文章于 2022-04-14 22:15:18 发布

阅读量197

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/Iris_Pumpkin/article/details/84404263

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css是一个很好玩的东西，尤其是css3的加入使得一些图像，布局之类的更加漂亮

这是用table做的网格
<table id="jsLayout">
    <tbody>
        <tr><td class="current"></td><td class="wrap"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td class="wrap"></td><td class="wrap"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    </tbody>
</table>



    /*css*/
    .current {
        background: #1D2088;
    }
    .wrap {
        background: #00A0E9;
    }

效果图

这是下一个的效果图

这个样式听说是之前百度的一道试题不过已经是很久以前的事情了
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
#div1{
	position: absolute;
	left: auto;
	width: 200px;
	height: 200px;
	border: solid red 2px;
}
#div2{
	position: relative;
	left: 202px;
	width: 0px;
	border: solid red 50px;
	border-bottom-color: transparent;
	border-top-color: transparent;
	border-right-color: transparent;
}
#div3{
	position: relative;
	left: 202px;
	top:-98px;
	width: 0;
	border: blue solid 48px;
	border-bottom-color: transparent;
	border-top-color: transparent;
	border-right-color: transparent;
	border-left-color: white;
}