怎么让div矩形切两个角
时间: 2023-05-11 11:06:43 浏览: 58
您可以使用 CSS 的 border-radius 属性来实现这个效果。具体来说,您可以设置一个较大的值作为 border-radius,然后使用 border-top-left-radius 和 border-bottom-right-radius 属性将其中两个角的值设置为 0,从而实现将 div 矩形切两个角的效果。以下是一个示例代码:
```
div {
width: 100px;
height: 100px;
background-color: #ccc;
border-radius: 20px;
border-top-left-radius: 0;
border-bottom-right-radius: 0;
}
```
相关问题
怎么让div矩形切两个三角形
您可以使用CSS的伪元素:before和:after来实现这个效果。具体的代码如下:
HTML代码:
```
<div class="triangle"></div>
```
CSS代码:
```
.triangle {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid #333;
position: relative;
}
.triangle:before {
content: "";
position: absolute;
top: -50px;
left: -50px;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 50px solid #333;
}
.triangle:after {
content: "";
position: absolute;
bottom: -50px;
left: -50px;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 50px solid #333;
}
```
这样就可以实现一个div矩形切成两个三角形的效果了。
使用svg+div来画两个长方形中间用箭头线连接
可以使用以下 HTML、CSS 和 SVG 代码来画两个长方形中间用箭头线连接:
```html
<div style="position: relative; width: 200px; height: 100px;">
<!-- 第一个长方形 -->
<svg viewBox="0 0 100 100" style="position: absolute; left: 20px; top: 20px;">
<rect x="0" y="0" width="100" height="100" fill="#f00" />
</svg>
<!-- 第二个长方形 -->
<svg viewBox="0 0 100 100" style="position: absolute; left: 120px; top: 20px;">
<rect x="0" y="0" width="100" height="100" fill="#0f0" />
</svg>
<!-- 箭头线 -->
<svg viewBox="0 0 200 100" style="position: absolute; left: 0; top: 0;">
<line x1="80" y1="50" x2="120" y2="50" stroke="#00f" stroke-width="2" marker-end="url(#arrow)" />
<!-- 定义箭头 -->
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,10 L8,5 z" fill="#00f" />
</marker>
</defs>
</svg>
</div>
```
其中,`div` 元素用来创建包裹 SVG 元素的容器,`position: relative;` 属性用来指定容器的定位方式,`width` 和 `height` 属性用来指定容器的大小。每个 SVG 元素用来创建长方形或箭头线,`viewBox` 属性用来指定 SVG 的视口大小和位置,`style` 属性用来指定 SVG 元素的定位方式和位置。箭头线的 SVG 元素需要放在最后面,以便覆盖前面的 SVG 元素。
需要注意的是,SVG 元素默认是 inline 元素,无法设置宽度和高度,需要用 CSS 的 `position` 属性和 `left`、`top` 属性来控制位置和大小。