这个边角div是直角不是圆角，div能实现出来吗？

compiteis45 2017-07-29 10:51:38

就是这个边角，像梯形一样的，但是背景透明的。

...全文

480 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

compiteis45 2017-07-29

打赏
举报

引用 4 楼 yanluofeihong 的回复:

[quote=引用 2 楼 compiteis45 的回复:] 不添加背景，能用css搞出来吗？


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>研究</title>
	<style type="text/css">

       .div1{
       	width: 400px;
       	height: 200px;
       	border: 3px solid #1475AC;
       	position: relative;
       }
       .div2{
          width: 30px;
          height: 30px;
          border-top: 3px solid #1475AC;
          transform: rotate(135deg);
          position: absolute;
          top:-18px;
          left: -17px;
          background-color: #fff;
       }
       .div3{
          width: 30px;
          height: 30px;
          border-bottom: 3px solid #1475AC;
          transform: rotate(45deg);
          position: absolute;
          top:-18px;
          right:-17px;
          background-color: #fff;
       }
	</style>
</head>
<body>
	<div class="div1">
		<div class="div2"></div>
		<div class="div3"></div>
	</div>
	
</body>
</html>

这样就行了[/quote] 这技巧不错，脑洞很大，谢谢

看着是个昵称 2017-07-29

打赏
举报

引用 2 楼 compiteis45 的回复:

不添加背景，能用css搞出来吗？

看着是个昵称 2017-07-29

打赏
举报

引用 2 楼 compiteis45 的回复:

不添加背景，能用css搞出来吗？


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>研究</title>
	<style type="text/css">

       .div1{
       	width: 400px;
       	height: 200px;
       	border: 3px solid #1475AC;
       	position: relative;
       }
       .div2{
          width: 30px;
          height: 30px;
          border-top: 3px solid #1475AC;
          transform: rotate(135deg);
          position: absolute;
          top:-18px;
          left: -17px;
          background-color: #fff;
       }
       .div3{
          width: 30px;
          height: 30px;
          border-bottom: 3px solid #1475AC;
          transform: rotate(45deg);
          position: absolute;
          top:-18px;
          right:-17px;
          background-color: #fff;
       }
	</style>
</head>
<body>
	<div class="div1">
		<div class="div2"></div>
		<div class="div3"></div>
	</div>
	
</body>
</html>

这样就行了

看着是个昵称 2017-07-29