Question

我的网站中有两个链接位于中心顶部和底部。它们靠近顶部/底部边缘，我希望它们有一个半圆边框，但不知道如何实现它。

CSS

#arrowdown, #arrowup {
  display: block;
  position: fixed;
  width: 40px; height: 40px;
  color: #fff;
  left: 0; right: 0;
  margin: 0 auto;
  z-index: 20;
  -webkit-backface-visibility: hidden;  
}

#arrowdown {  bottom: 10px; }
#arrowup { top: 10px; }

HTML

<button id="arrowup">
    <i class="fa fa-chevron-up fa-2x"></i>
</button>

<button id="arrowdown">
    <i class="fa fa-chevron-down fa-2x"></i>
</button>

Answer 1

这是你在找什么？

#arrowdown, #arrowup {
  display: block;
  position: fixed;
  width: 40px; height: 40px;
  color: #fff;
  left: 0; right: 0;
  margin: 0 auto;
  z-index: 20;
  -webkit-backface-visibility: hidden;  
  border: none;
  border-radius: 50%;
}

#arrowdown {  bottom: -20px; }
#arrowup { top: -20px; }

#arrowdown:after, #arrowup:after {
  content: '';
  position: absolute;
  display: block;
  top: 0; left: 0px;
  width: 38px; height: 38px;
  border: 1px solid red;
  border-radius: 50%;
  clip: rect(0px,40px,20px,0px);
}
#arrowup:after {
  clip: rect(20px,40px,40px,0px);
}

<button id="arrowup">
    <i class="fa fa-chevron-up fa-2x"></i>
</button>

<button id="arrowdown">
    <i class="fa fa-chevron-down fa-2x"></i>
</button>

Answer 2

＆＃13;

#arrowdown, #arrowup {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    height: 100%;
    width: 100%;
    z-index: 111;
	
}
.arrowdown {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: red red -moz-use-text-color;
    border-image: none;
    border-style: solid solid none;
    border-width: 2px 2px 0;
    bottom: 0;
    transform: rotate(180deg);
    left: 0;
    right: 0;
}
.arrowup {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: red red -moz-use-text-color;
    border-image: none;
    border-style: solid solid none;
    border-width: 2px 2px 0;
    top: 0;
    left: 0;
    right: 0;
}
div{
     height:45px;
     width:90px;
     border-radius: 90px 90px 0 0;
     -moz-border-radius: 90px 90px 0 0;
     -webkit-border-radius: 90px 90px 0 0;
     background:green;
	 z-index: 9999;
	 position:absolute;
}

＆＃13;

<div class="arrowup"><button id="arrowup"><i class="fa fa-chevron-up fa-2x"></i></button></div>
<div class="arrowdown"><button id="arrowdown"><i class="fa fa-chevron-down fa-2x"></i></button></div>

＆＃13;

在按钮周围创建半圆

2 个答案: