主页 / 问题 / 644310
Accepted
Telion
Asked:2020-03-26 19:54:52 +0000 UTC2020-03-26 19:54:52 +0000 UTC

块的切角

  • 772

您需要切割块的角，以便切割部分的背景是透明的。背景将是图像，因此三角形不起作用。在这种情况下，切掉部分的整个块必须有框架，因此存在问题。

我用创建了一个切片器clip-path，但是盒子边框就像盒子本身一样被切片了。结果，结果是这样的：

例子

html,
body,
.bdiv,
.mainblock {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.bdiv {
    display: table;
}
.mainblock {
    display: table-cell;
    vertical-align: middle;
}
.mainblock>div {
    position: relative;
    width: 500px;
    background: #444;
    margin: 0 auto;
}
.content {
    padding: 10px 30px;
    text-align: center;
    font-size: 16px;
    font-family: sans-serif;
    color: ddd;
}
.head-text {
    clip-path: polygon(460px 0, 100% 30px, 100% 100%, 0 100%, 0 0);
    font-size: 18px;
    color: #eee;
    border: 5px solid #fff;
    background: #333;
}
.cont-text {
    background: #000;
}
.cont-text>form input {
    padding: 5px;
    width: 40%;
}
<html>
<body style="background: #444;">
<div class="bdiv">

	<div class="mainblock">
		<div>
			<div class="content head-text">Приветствую!</div>
			<div class="content cont-text">
				<form>
					<input type="button" value="Привет">
					<input type="button" value="Пока">
				</form>
			</div>
		</div>
	</div>

</div>
</body>
</html>

当然，您可以在切片顶部添加一个绝对块线作为框架，但我认为这还没有完成。但那又如何呢？我需要 2 个这样的切口，一个如图所示，第二个在下方左侧。

html

4 个回答

  1. Best Answer

    html,
body,
.bdiv,
.mainblock {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.bdiv {
    display: table;
}
.mainblock {
    display: table-cell;
    vertical-align: middle;
}
.mainblock>div {
    position: relative;
    width: 500px;
    /* background: #444; */
    margin: 0 auto;
}
.content {
    padding: 10px 30px;
    text-align: center;
    font-size: 16px;
    font-family: sans-serif;
    color: #ddd;
}

.head-text {
  -webkit-clip-path: polygon(0 0, 90% 0, 100% 30px, 100% 100%, 10% 100%, 0 15px);
    clip-path: polygon(0 0, 90% 0, 100% 30px, 100% 100%, 10% 100%, 0 15px);
    font-size: 18px;
    color: #eee;    
    background: url(https://www.noupe.com/wp-content/uploads/2009/10/pattern-13.jpg) center no-repeat;
}

.box {
  background: #fff;
  -webkit-clip-path: polygon(0 0, 90% 0, 100% 30px, 100% 100%, 10% 100%, 0 25px);
    clip-path: polygon(0 0, 90% 0, 100% 30px, 100% 100%, 10% 100%, 0 25px);
    padding: 5px;
} 

.cont-text {
    background: #000;
}
.cont-text>form input {
    padding: 5px;
    width: 40%;
}

body {
  background: #444;
}
    <div class="bdiv">
  <div class="mainblock"> 
    <div>
      <div class="box"><div class="content head-text">Приветствую!</div></div>
      <div class="content cont-text">
        <form>
          <input type="button" value="Привет">
          <input type="button" value="Пока">
        </form>
    </div>
  </div>
</div>

    • 9

  2. 这是另一个 svg 选项：

    html,
body,
.bdiv,
.mainblock {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.bdiv {
    display: table;
}
.mainblock {
    display: table-cell;
    vertical-align: middle;
}
.mainblock>div {
    position: relative;
    width: 500px;
    background: #444;
    margin: 0 auto;
}
.content {
    padding: 10px 30px;
    text-align: center;
    font-size: 16px;
    font-family: sans-serif;
    color: ddd;
}
.head-text {
    font-size: 18px;
    color: #eee;
    padding: 15px 30px;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.cont-text {
    background: #000;
}
.cont-text>form input {
    padding: 5px;
    width: 40%;
}


.top {
  position: relative;
  height: 50px;
}

.top-bg {
  max-width: 100%;
  width: 100%;
}
    <body style="background: #444;">
<div class="bdiv">

	<div class="mainblock">
		<div>
			<div class="top">
              <svg width="500" height="50" class="top-bg" viewBox="0 0 500 50">
                <defs>
                  <pattern id="img1" patternUnits="userSpaceOnUse" width="850" height="315">
                    <image xlink:href="http://www.wallpapersonview.com/wallpapers/2/fbcover_facebook_timeline_black_amazing_high_quality_desktop_background-011.jpg" x="0" y="0" width="850" height="315" />
                  </pattern>
                </defs>

                <path stroke="#fff" fill="url(#img1)" stroke-width="5" 
                      d="M 2,2 L 450,2 L 498,20 L 498,48 L 50,48 L 2,30 z"/>
              </svg>
              
			  <div class="content head-text">Приветствую!</div>
			</div>
			<div class="content cont-text">
				<form>
					<input type="button" value="Привет">
					<input type="button" value="Пока">
				</form>
			</div>
		</div>
	</div>

</div>
</body>

    • 7

  3. SVG解决方案

    在此处输入图像描述

    <style>
body {
  background: url('http://lorempixel.com/600/600/nature/1') no-repeat;
  background-size: cover;
}
    height: 100%;
    width: 100%;
    overflow: hidden;

.bdiv {
    display: table;
}
.container {
position: relative;
    width: 500px;
    margin: 0 auto;
	}

</style>
<html>
<body>

<div class="bdiv">	
<div class="container">	

<svg version="1.1"
      xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
   	  width="460" height="100" viewBox="0 0 460 100" style="border:0px solid red">
    <defs>
	  <mask id="rect1">
	  <g fill="white">
	  <path id="p1" d="M56,40 30,25 30,10 404,10 430,25 430,40z "  />
	   <path id="p2" d="M82,80 56,65 56,50 204,50 256,80z" /> 
	   <path id="p3" d="M270,80 218,50 399,50 430,65 430,80z"/>
       </g>	 
	 </mask>
	</defs>
 <style>
   #p2:hover, #p3:hover{
   fill:orangered;
   color:white;
   }
</style>
         <rect  width="460" height="100" fill-opacity="0.3"  fill="black" /> 
        <rect  width="460" height="100" fill-opacity="0.1"  fill="black"  mask="url(#rect1)"/>  
			<g  stroke-width="2" stroke="white" stroke-opacity="0.5"      fill="none">    
			   <path id="p1" d="M56,40 30,25 30,10 404,10 430,25 430,40 56,40z" />
			   <path id="p2" d="M82,80 56,65 56,50 204,50 256,80z" />
			   <path id="p3"  d="M270,80 218,50 399,50 430,65 430,80z" /> 
      	  </g>
	  <g font-size="0.9em" font-family="verdana"  stroke="white" fill="white">  
		  <text id="txt1" x="170" y="28" > Приветствую!  </text>
		   <text id="txt2" x="120" y="70" > Привет  </text> 
		   <text  id="txt3" x="320" y="70" > Пока  </text>	  
      </g>	
	</svg> 
</div> 
</div>

</body>

    在这里，三个菜单按钮由三个补丁组成。相同的补丁包含在蒙版中，用于使背景可见。

    该解决方案是通用的，因为不必每次都选择按钮的颜色及其轮廓。它将始终与所选页面背景协调一致。要检查、替换背景或在全视图中打开片段。

    尝试用不同的图片替换背景。我将鼠标悬停在按钮上，原则上向它们添加链接并不困难。一个 SVG 块中的所有元素。最好将它添加到 Html 页面内联。

    2017 年 8 月 23 日更新

    根据问题作者评论中的评论细化示例

    将鼠标悬停在文本上时，链接会失去其背景，直到光标离开块并返回。而且我仍然不明白如何为特定的 SVG 块制作动画背景。

    此效果是由于块中的文本未包含在应用选择器的组中:hover。我通过将块和文本组合成一组来解决这个问题。 

    <g id="p2">
                 <path  d="M82,80 56,65 56,50 204,50 256,80z" />
                  <text id="txt2" x="120" y="70" font-size="0.9em" font-
                  family="verdana" fill="white" > Привет  </text>
 </g>

    通过更改透明度添加背景和文本动画 

    #p1:hover, #p2:hover, #p3:hover{
   fill:dodgerblue;
   color:white;
   opacity:1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.8s ease-in-out;

   }
   #p1, #p2, #p3
   {
    opacity:0.5;
   -webkit-transition: opacity 0.5s;
       transition: opacity 0.8s ease-in-out;
   }

    下面是修改后的例子：

    body {
  background: url('https://i.pinimg.com/originals/22/06/1e/22061e28e591fb82b41a151d64cefe55.jpg') no-repeat;
  background-size: cover;
}
    height: 100%;
    width: 100%;
    overflow: hidden;

.bdiv {
    display: table;
}
.container {
position: relative;
    width: 500px;
    margin: 0 auto;
	}
#p1:hover, #p2:hover, #p3:hover{
   fill:dodgerblue;
   color:white;
   opacity:1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.8s ease-in-out;
 
   }
   #p1, #p2, #p3
   {
    opacity:0.5;
   -webkit-transition: opacity 0.5s;
       transition: opacity 0.8s ease-in-out;
   }
    <body>

<div class="bdiv">	
<div class="container">	

<svg version="1.1"
      xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
   	  width="460" height="100" viewBox="0 0 460 100" style="border:0px solid red">
    <defs>
	  <mask id="rect1">
	  <g fill="white">
	  <path  d="M56,40 30,25 30,10 404,10 430,25 430,40z "  />
	   <path  d="M82,80 56,65 56,50 204,50 256,80z" /> 
	   <path  d="M270,80 218,50 399,50 430,65 430,80z"/>
       </g>	 
	 </mask>
	</defs>

         <rect  width="460" height="100" fill-opacity="0.3"  fill="black" /> 
        <rect  width="460" height="100" fill-opacity="0.1"  fill="black"  mask="url(#rect1)"/>  
			<g  stroke="white"    fill="none">    
			   <g id="p1">
			     <path  d="M56,40 30,25 30,10 404,10 430,25 430,40 56,40z" />
				 <text id="txt1" x="170" y="28" font-size="0.9em" font-family="verdana" fill="white" > Приветствую!  </text>
			   </g>
			   <g id="p2">
			     <path  d="M82,80 56,65 56,50 204,50 256,80z" />
				  <text id="txt2" x="120" y="70" font-size="0.9em" font-family="verdana" fill="white" > Привет  </text>
			   </g>
			   <g id="p3">
			      <path   d="M270,80 218,50 399,50 430,65 430,80z" /> 
			      <text  id="txt3" x="320" y="70"font-size="0.9em" font-family="verdana" fill="white" > Пока  </text>	  
			   </g>
      	  </g>
	 
		  
		
		
      </g>	
	</svg> 
</div> 
</div>

</body>

    • 6

  4. 具有相同嵌套 div 的解决方案clip-path：

    .content {
  padding: 10px 30px;
  text-align: center;
  font-size: 16px;
  font-family: sans-serif;
  color: ddd;
}
.head-text {
  font-size: 18px;
  color: #eee;
  background: #333;
}
.inborder {
  position: absolute;
  top: 5px; right: 5px; bottom: 5px; left: 5px;
  clip-path: inherit;
}
.border {
  position: relative;
  clip-path: polygon(
    95% 0, 
    100% 45%, 
    100% 100%, 
    5% 100%,
    0 55%, 
    0 0
  );
  background: red;
  min-height: 50px;  
}
    <div class="border">
  <div class="inborder content head-text">
    Приветствую!
  </div>
</div>

    • 3

相关问题