css三角形边框怎么制作拼接在一起的?

html-css011

css三角形边框怎么制作拼接在一起的?,第1张

这位网友你好,三角形边框只是利用了一个元素的边框,元素本身宽高都为0,把边框颜色设置为透明色,然后需要的一边设置为自己想要的颜色即可。

div{

  border:20px solid transparent

  border-left-color:#ff0000

}

例如上面就是一个向右的三角形。当然你可以可以利用左边框和下边框拼成一个大三角形,其他都类似。

你的HTML代码 特别是A标签 嵌套错误。应该是:<a href="图片9的链接" style="margin:0padding:0"><img src="图片1" alt="" width="" height=""></a>

margin:0padding:0的意思是 边距为0,无缝

方法和详细的操作步骤如下:

1、第一步,创建一个新的html文件,并将其命名为test.html进行演示,见下图,转到下面的步骤。

2、第二步,执行完上面的操作之后,创建一个div模块并将其class属性设置为mydiv,见下图,转到下面的步骤。

3、第三步,执行完上面的操作之后,使用img图片标签创建两个图片,并且src属性指向不同的图片路径,见下图,转到下面的步骤。

4、第四步,执行完上面的操作之后,使用“

 *”初始化页面上所有元素的css样式,将内部边距设置为0,将外部边距设置为0,见下图,转到下面的步骤。

5、第五步,执行完上面的操作之后,设置div的样式,将其宽度设置为700px,将高度设置为400px,边框设置为1px,居中对齐,见下图,转到下面的步骤。

6、第六步,执行完上面的操作之后,设置图片的大小,宽度为280px,高度为200px。

 为了使用图片的水平排列,需要使用float属性设置图片浮动的统一方向,见下图,转到下面的步骤。

7、第七步,执行完上面的操作之后,在浏览器中打开“test.html”文件,两张连续的图片已经在同一行,见下图。这样,就解决了这个问题了。