[分享]css3怎么把div三角

CSS3是前端开发中的一个重要技术，它能够用来实现各种酷炫的效果。其中，使用CSS3来创建一个三角形在开发中非常常见。今天，我们就来讲一下如何用CSS3来创建一个带有三角形的DIV。首先，我们需要创建...

CSS3是前端开发中的一个重要技术，它能够用来实现各种酷炫的效果。其中，使用CSS3来创建一个三角形在开发中非常常见。今天，我们就来讲一下如何用CSS3来创建一个带有三角形的DIV。

首先，我们需要创建一个DIV。代码如下：

<div class="triangle">
    <p>这是带三角形的DIV</p>
</div> 

然后，在CSS中定义这个DIV的样式。我们需要设置它的宽度、高度和背景色，并把它的position设为relative。代码如下：

.triangle {
    width: 200px;
    height: 200px;
    background-color: #ccc;
    position: relative;
} 

接下来，我们需要在这个DIV中添加一个伪元素::before，用来创建三角形。要注意的是，我们需要将这个伪元素的position设为absolute，然后将它的left和top值分别设为0和-20px，让它位于DIV的顶部。代码如下：

.triangle::before {
    content: "";
    border-style: solid;
    border-width: 20px 10px 0 10px;
    border-color: #ccc transparent transparent transparent;
    position: absolute;
    left: 0;
    top: -20px;
} 

解释一下，我们使用border来创建三角形。其中，border-width的值表示上、右、下、左四个边框的宽度，逆时针方向依次为上、右、下、左。我们将上边框的宽度设为20px，右和左边框的宽度设为10px，然后将下边框的宽度设为0，这样就形成了一个三角形。

最后，我们还需要清除::before的默认margin和padding。代码如下：

.triangle::before {
    margin: 0;
    padding: 0;
} 

这样，我们就成功地创建了一个带三角形的DIV。完整的代码如下：

<style>
    .triangle {
        width: 200px;
        height: 200px;
        background-color: #ccc;
        position: relative;
    }
    
    .triangle::before {
        content: "";
        border-style: solid;
        border-width: 20px 10px 0 10px;
        border-color: #ccc transparent transparent transparent;
        position: absolute;
        left: 0;
        top: -20px;
        margin: 0;
        padding: 0;
    }
</style>

<div class="triangle">
    <p>这是带三角形的DIV</p>
</div>