隐藏div中心的border-top

时间：2017-01-05 03:27:42

标签： html css sass

这是我想要实现的目标

half circle

这是我div的开放状态，所以通常你看不到任何过滤器，而只是一个完整的圆圈。我遇到麻烦的是我不知道如何防止小部分的边界。

以下是我的内容以及Codepen 

.bold {
  font-weight: bold;
}

.bp-purple {
  color: #9696ff;
}

.bp-nyan {
  color: #67cfd6;
}

.bp-pink {
  color: #e49092;
}

.bp-green {
  color: #96cf6b;
}

.filter-options {
  text-align: center;
  margin: 15px 0 0 0;
}
.filter-options__intro {
  text-transform: uppercase;
  display: inline-block;
  border: 1px solid #222;
  border-radius: 50%;
  height: 80px;
  width: 80px;
  padding: 30px 0;
  color: #222;
}
.filter-options__intro i {
  margin: -5px 0 0 0;
  display: block;
}
.filter-options__intro:hover {
  color: #f93;
}
.filter-options__selections {
  border: 1px solid #222;
  position: relative;
  bottom: 30px;
  background: #FFF;
  text-align: left;
  padding: 15px;
  margin: 0 0 -25px 0;
}
.filter-options__selections .list-inline, .filter-options__selections .checkbox {
  font-weight: bold;
  text-transform: uppercase;
}
.filter-options__selections input {
  margin: 0;
}
.filter-options__selections .first {
  font-size: 1.2em;
}
.filter-options__selections .dotted-line {
  margin: 0 0 10px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
	<div class="filter-options">
		<a href="" class="filter-options__intro">
			<b class="center-block">Filters</b>
			<i class="fa fa-caret-down" aria-hidden="true"></i>
		</a>
		<div class="filter-options__selections clearfix">
			<div class="clearfix">
				<ul class="list-inline pull-left">
					<li class="first bp-purple">Categories:</li>
					<li>Category 1</li>
					<li>Category 2</li>
					<li>Category 3</li>
					<li>Category 4</li>
				</ul>
				<a class="pull-right bold" href="">View All <i class="fa fa-caret-right" aria-hidden="true"></i></a>
			</div>
			<div class="dotted-line"></div>
			<div class="clearfix">
				<ul class="list-inline pull-left">
					<li class="first bp-nyan">Location:</li>
					<li>Shanghai</li>
					<li>Beijing</li>
					<li>Hangzhou</li>
					<li>Chengdu</li>
					<li>Guangzhou</li>
					<li>Shenzhen</li>
					<li>Suzhou</li>
					<li>Nanjing</li>
				</ul>
				<a class="pull-right bold" href="">View All <i class="fa fa-caret-right" aria-hidden="true"></i></a>
			</div>
			<div class="dotted-line"></div>
			<div class="clearfix">
				<ul class="list-inline pull-left">
					<li class="first bp-pink">Brand:</li>
					<li>Belle</li>
					<li>St&amp;Sat</li>
					<li>Charles &amp; Keith</li>
					<li>Aldo</li>
					<li>Daphne</li>
					<li>Zara</li>
					<li>Camel</li>
					<li>Le Saunda</li>
					<li>Tata</li>
				</ul>
				<a class="pull-right bold" href="">View All <i class="fa fa-caret-right" aria-hidden="true"></i></a>
			</div>
			<div class="dotted-line"></div>
			<div class="clearfix">
				<ul class="list-inline pull-left">
					<li class="first bp-green">Price Range:</li>
					<li>100 - 200</li>
					<li>200 - 500</li>
					<li>500 - 1000</li>
					<li>1000 - 3000</li>
				</ul>
			</div>
			<div class="dotted-line"></div>
			<div class="checkbox">
				<label>
              <input type="checkbox" /> Show only free shipping products
            </label>
			</div>
			<div class="checkbox">
				<label>
              <input type="checkbox" /> Do not show international products
            </label>
			</div>
			<div class="dotted-line"></div>
		</div>
	</div>
</div>

修改 添加了sass标签，因为我的codepen是sass但不确定stack是否允许我在片段中使用它

4 个答案:

答案 0 :(得分：2)

首先，您需要相对设置<a>位置。

.filter-options__intro {
 position: relative;
}

然后在选择器后添加一个css，以掩盖黑线

a.filter-options__intro:after {
    content: '';
    display: block;
    background: white;
    z-index: 1111;
    position: absolute;
    width: 75px;
    height: 1px;
    bottom: 0px;
    left: 0;
    right: 0;
    margin: auto;
    top: 20px;
}

工作示例： Overlap element using CSS :after

答案 1 :(得分：1)

尝试过可能对您有所帮助的事情：

  • 定位链接relative的整个DOM。
  • 我必须使用三个DOM元素才能使它看起来像你的输出。
  • 将内容定位于z-index: 1。
  • 将其他人定位在较高z-index。
  • 给出了一个虚假的背景。

* {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1;
  text-decoration: none;
}
body {
  background-color: #fff;
}
.center {
  text-align: center;
  position: relative;
  z-index: 5;
}
.faux-cutter {
  text-align: center;
  display: inline-block;
  overflow: hidden;
  height: 30px;
  border-bottom: 1px solid #fff;
  position: relative;
  z-index: 3;
  background-color: #fff;
  bottom: -2px;
}
.border {
  padding: 10px 20px 30px;
  display: inline-block;
  border: 1px solid #666;
  border-radius: 100%;
  position: relative;
  z-index: 4;
}
.content {
  border: 1px solid #666;
  padding: 25px;
  text-align: center;
  top: -2px;
  position: relative;
  z-index: 1;
}
<div class="center">
  <div class="faux-cutter">
    <a href="" class="border">Hi</a>
  </div>
</div>
<div class="content">
  Content here.
</div>

预览

preview

答案 2 :(得分：0)

我会在矩形上叠加半圆，然后我会添加一个内部绝对定位的div来隐藏滤镜圆的底部。你可以这样做：

.bold {
  font-weight: bold;
}
.bp-purple {
  color: #9696ff;
}
.bp-nyan {
  color: #67cfd6;
}
.bp-pink {
  color: #e49092;
}
.bp-green {
  color: #96cf6b;
}
.filter-options {
  text-align: center;
  margin: 15px 0 0 0;
}
.filter-options__intro {
  text-transform: uppercase;
  display: inline-block;
  border: 1px solid #222;
  border-radius: 50%;
  height: 80px;
  width: 80px;
  background: white;
  padding: 30px 0;
  margin-bottom: -25px;
  color: #222;
}
.filter-options__intro i {
  margin: -5px 0 0 0;
  display: block;
}
.filter-options__intro:hover {
  color: #f93;
}
.filter-options__selections {
  border-top: 1px solid #222;
  background: #FFF;
  text-align: left;
}
.filter-options__selections-inner {
  position:absolute;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  left: 15px;
  right: 15px;
  background: white;
  padding: 15px;
}
.filter-options__selections .list-inline,
.filter-options__selections .checkbox {
  font-weight: bold;
  text-transform: uppercase;
}
.filter-options__selections input {
  margin: 0;
}
.filter-options__selections .first {
  font-size: 1.2em;
}
.filter-options__selections .dotted-line {
  margin: 0 0 10px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="filter-options">
    <a href="" class="filter-options__intro">
      <b class="center-block">Filters</b>
      <i class="fa fa-caret-down" aria-hidden="true"></i>
    </a>
    <div class="filter-options__selections clearfix">
      <div class="filter-options__selections-inner">
        <div class="clearfix">
          <ul class="list-inline pull-left">
            <li class="first bp-purple">Categories:</li>
            <li>Category 1</li>
            <li>Category 2</li>
            <li>Category 3</li>
            <li>Category 4</li>
          </ul>
          <a class="pull-right bold" href="">View All <i class="fa fa-caret-right" aria-hidden="true"></i></a>
        </div>
        <div class="dotted-line"></div>
        <div class="clearfix">
          <ul class="list-inline pull-left">
            <li class="first bp-nyan">Location:</li>
            <li>Shanghai</li>
            <li>Beijing</li>
            <li>Hangzhou</li>
            <li>Chengdu</li>
            <li>Guangzhou</li>
            <li>Shenzhen</li>
            <li>Suzhou</li>
            <li>Nanjing</li>
          </ul>
          <a class="pull-right bold" href="">View All <i class="fa fa-caret-right" aria-hidden="true"></i></a>
        </div>
        <div class="dotted-line"></div>
        <div class="clearfix">
          <ul class="list-inline pull-left">
            <li class="first bp-pink">Brand:</li>
            <li>Belle</li>
            <li>St&amp;Sat</li>
            <li>Charles &amp; Keith</li>
            <li>Aldo</li>
            <li>Daphne</li>
            <li>Zara</li>
            <li>Camel</li>
            <li>Le Saunda</li>
            <li>Tata</li>
          </ul>
          <a class="pull-right bold" href="">View All <i class="fa fa-caret-right" aria-hidden="true"></i></a>
        </div>
        <div class="dotted-line"></div>
        <div class="clearfix">
          <ul class="list-inline pull-left">
            <li class="first bp-green">Price Range:</li>
            <li>100 - 200</li>
            <li>200 - 500</li>
            <li>500 - 1000</li>
            <li>1000 - 3000</li>
          </ul>
        </div>
        <div class="dotted-line"></div>
        <div class="checkbox">
          <label>
            <input type="checkbox" />Show only free shipping products
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" />Do not show international products
          </label>
        </div>
        <div class="dotted-line"></div>
      </div>
    </div>
  </div>
</div>

答案 3 :(得分：0)

您无法禁用部分边框。我建议添加一个跨度来掩盖边框的特定部分，并使用小矩形和z-index。 Here is a forked pen with my changes.

我添加了span类＆＃39;掩码＆＃39;直接在你的.filter-options div中。 <span class="mask"></span>。

添加一些CSS允许我使用纯白色块来构建蒙版的形状。只要背景颜色保持白色，它就会起作用。

.mask {
    background-color: white;
    position: relative;
    top: 4px;
    z-index: 2;
    width: 77px;            
    height: 3px;
    display: block;
 }
相关问题
最新问题