我如何在HTML中创建三角形？ [英] How can I make a triangle in HTML?

问题描述

我想使用基本CSS在HTML页面中制作三角形。我使用的三角形图片需要时间来加载，所以我想减少我的页面加载时间。

解决方案

不可能与HTML，但与CSS。示例：

 < div class =triangle>< / div> 
  

  .triangle {
 width：0; 
 height ：0; 
 border：solid 30px; 
 border-color：transparent transparent black transparent; 
} 
  

现场演示： jsFiddle

$ b $ ul
$ 30px大小：宽度和高度，如果你想要一个更小或更大的三角形，你可以改变它。

如果你想旋转三角形，切换黑色和透明在 border-color 属性中，请参阅 jsFiddle

I want to use basic CSS to make triangle in an HTML page. I am using triangle pics which take time to load, so, I want to decrease loading time of my page.

解决方案

Not possible with HTML, but with CSS. Example:

<div class="triangle></div>

.triangle {
    width: 0;
    height: 0;
    border: solid 30px;
    border-color: transparent transparent black transparent;
}

Live demo: jsFiddle

• 30px in the border property defines the size: width and height. You can change it if you want a smaller or a bigger triangle.
• if you want to rotate the triangle, switch the position of black and transparent in the border-color property. See jsFiddle

这篇关于我如何在HTML中创建三角形？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！