用css画出一个长方形右边多一个三角形

可以使用CSS的伪元素来实现这个效果。以下是一个简单的代码示例：

<div class="box"></div>

.box {
  width: 100px;
  height: 50px;
  position: relative;
  background-color: #ccc;
}

.box::after {
  content: "";
  position: absolute;
  top: 0;
  right: -15px; /* 三角形宽度为15px */
  width: 0;
  height: 0;
  border-top: 25px solid transparent; /* 三角形高度为50px */
  border-left: 15px solid #ccc; /* 三角形宽度为15px，颜色与长方形一致 */
}

在这个示例中，我们使用了一个带有背景颜色的 `div` 元素来表示长方形。然后，我们使用 `::after` 伪元素来创建一个三角形，并将其定位到长方形的右侧。通过设置 `border-top` 和 `border-left` 属性，我们可以定义三角形的高度、宽度和颜色。

相关问题

css 长方形右边三角形

通过引用中的代码，可以制作出一个带有右边三角形的长方形。代码如下所示：

<style>
div {
    width: 200px;
    height: 100px;
    border: 2px solid black;
    position: relative;
}

div::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid black;
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
}
</style>

这段代码中，我们设置了一个div元素的宽度为200px，高度为100px，并添加了2px的黑色边框。然后，使用伪元素::before创建了一个宽度为0、高度为0的三角形，并通过设置边框的样式和颜色来实现了右边的三角形效果。通过调整三角形的位置和大小，你可以根据需要来定制长方形右边三角形的样式。

如何用css画一个三角形

可以使用 CSS 的 border 属性来绘制三角形，具体方法如下：

HTML 代码：

<div class="triangle"></div>

CSS 代码：

.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid transparent; /* 上边框 */
  border-right: 100px solid #f00; /* 右边框 */
  border-bottom: 50px solid transparent; /* 下边框 */
}

解释：

1. 首先，将 div 元素的宽度和高度设置为 0，这是因为三角形的大小是由 border 边框定义的。
2. 然后，使用 border-top 定义三角形的上边框，设置颜色为透明，宽度为 50px。
3. 使用 border-right 定义三角形的右边框，设置颜色为红色，宽度为 100px。
4. 最后，使用 border-bottom 定义三角形的下边框，设置颜色为透明，宽度为 50px。

这样就可以画出一个红色的等腰三角形了。可以根据需要调整 border 宽度和颜色，来绘制不同样式的三角形。