在HTML / CSS中是否可能有对角边框线？ [英] Are diagonal border lines possible in HTML / CSS?

问题描述

只是意识到我还没有看到这个。

但不能相信这是不可能的。

我想在纯CSS / HTML中绘制一个三角形。如果可能，则为等边。

说明：

>解决方案

一个解决方案

对角线不容易。一个解决方案是覆盖伪元素来创建边框，假设你处理的是实体背景颜色。然后你必须定位内容，使它看起来不错。您甚至可以执行一些文字换行。

这是一个基本示例 使用此代码：

CSS& HTML

  .triangleBorder {position：relative; width：200px; height：173.2px; / * for equalateral = Width *（sq.root 3）/ 2 * /} .triangleBorder：before {content：''; width：0; height：0; position：absolute; z-index：-2; border：100px solid transparent; border-top-width：0; border-bottom：173.2px solid black; } .triangleBorder：after {content：''; width：0; height：0; position：absolute; left：1px; top：1px; z-index：-1; border：99px solid transparent; edge-top-width：0; border-bottom：171.5px solid white; } .triangleBorder span {position：absolute; width：100％; text-align：center; top：50％; }  

 < div class =triangleBorder> < span>内容< span>< / div>  

Just realized I have yet to see this.

But can not believe it isn't possible.

I'm looking to draw a triangle in pure CSS/HTML. An equilateral if possible.

Clarification:

I don't wish to use an image to achieve this.

You would need to be able to put content inside the div.

解决方案

One Solution

Diagonals are not easy. One solution is to overlay pseudo-elements to create the border, assuming you are dealing with solid background colors. Then you have to position the content to make it look nice. You could even do some text wrapping.

Here is a basic example using this code:

CSS & HTML Respectively

.triangleBorder {
        position: relative;
        width: 200px;
        height: 173.2px; /* for equalateral = Width * (sq.root 3) / 2 */
    }
    
    .triangleBorder:before {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        z-index: -2;
        border: 100px solid transparent;
        border-top-width: 0;
        border-bottom: 173.2px solid black;
    }
    
    .triangleBorder:after {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        left: 1px;
        top: 1px;
        z-index: -1;
        border: 99px solid transparent;
        border-top-width: 0;
        border-bottom: 171.5px solid white;
    }
    
    .triangleBorder span {
       position: absolute;
       width: 100%;
       text-align: center;
       top: 50%;
    }

<div class="triangleBorder">
    <span>Content<span>
</div>

这篇关于在HTML / CSS中是否可能有对角边框线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！