Question

我不知道这是否重复，但是我搜索但却找不到任何东西。

我试图在顶部边框的中间做一个半圈的div，如下图所示：

黑色方块是div（用于模态），中间用圆圈切割边框。红色部分是页面背景（可以是任何东西......图像，文本......）。

我怎样才能在html / css中执行此操作？我试图避免图像这样做!!

谢谢

Answer 1

一种方法：

＆＃13;

* {margin: 0; padding: 0; box-sizing: border-box}
html, body {height: 100%}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f00;
}

.black {
  display: flex;
  justify-content: center;
  width: 200px;
  height: 200px;
  background: #000;
}

.white {
  position: relative;
  top: -25px;
  width: 50px;
  height: 50px;
  border: 2px solid #f00;
  border-radius: 50%;
  background: #fff;
}

＆＃13;

<div class="black">
  <div class="white"></div>
</div>

＆＃13;

您想要的＆＃34;入门套件＆＃34; 解决方案：

＆＃13;

* {margin: 0; padding: 0; box-sizing: border-box}
html, body {height: 100%}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom left, Navy, Tomato, Skyblue);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.outer {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 275px;
  height: 550px;
  background: linear-gradient(Navy 33.33%, Tomato 66.66%, Skyblue 100%);
  box-shadow: 0 15px 15px #000;
}

.outer > span {color:#fff}

.outer > .inner {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  position: relative;
  padding-top: 20px;
  width: 225px;
  height: 275px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 10px 10px #000;
}

.outer > .inner > #user {
  display: block;
  position: absolute;
  top: -35px;
  width: 70px;
  height: 70px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: Navy;
  box-shadow: 0 0 0 10px Navy;
}

.outer > .inner > input[type=text],
.outer > .inner > #sign_in {
  width: 80%;
  padding: 5px;
}

.outer > .inner > #sign_in {
  display: block;
  padding: 10px 0;
  color: #fff;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px 1px #000;
  background: Tomato;
  box-shadow: 0 5px 5px #000;
}

＆＃13;

<div class="outer">
  <span>My Account</span>
  <div class="inner">
    <img src="http://www.ecovadis.com/wp-content/themes/ecovadis/images/Icon-user.png" alt="User" id="user">
    <input type="text" placeholder="Username">
    <input type="text" placeholder="Password">
    <a href="#" id="sign_in">Sign in</a>
  </div>
  <span></span> <!-- just to make things easier -->
</div>

＆＃13;

你可以从这里继续。

Answer 2

您可以尝试使用之前元素：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
  <div class="content">
    Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels, the first of which is A Game of Thrones. It is filmed in Belfast and elsewhere in the United Kingdom, Canada, Croatia, Iceland, Malta, Morocco, Spain, and the United States. The series premiered on HBO in the United States on April 17, 2011, and its seventh season ended on August 27, 2017. The series will conclude with its eighth season premiering either in 2018 or 2019.[1]

Set on the fictional continents of Westeros and Essos, Game of Thrones has several plot lines and a large ensemble cast but centers on three primary story arcs. The first story arc centers on the Iron Throne of the Seven Kingdoms and follows a web of alliances and conflicts among the dynastic noble families either vying to claim the throne or fighting for independence from the throne. The second story arc focuses on the last descendant of the realm's deposed ruling dynasty, exiled and plotting a return to the throne. The third story arc centers on the longstanding brotherhood charged with defending the realm against the ancient threats of the fierce peoples and legendary creatures that lie far north, and an impending winter that threatens the realm.Game of Thrones has attracted record viewership on HBO and has a broad, active, international fan base. It has been acclaimed by critics, particularly for its acting, complex characters, story, scope, and production values, although its frequent use of nudity and violence (including sexual violence) has been criticized. The series has received 38 Primetime Emmy Awards, including Outstanding Drama Series in 2015 and 2016, more than any other primetime scripted television series. Its other awards and nominations include three Hugo Awards for Best Dramatic Presentation (2012–2014), a 2011 Peabody Award, and four nominations for the Golden Globe Award for Best Television Series – Drama (2012 and 2015–2017). Of the ensemble cast, Peter Dinklage has won two Primetime Emmy Awards for Outstanding Supporting Actor in a Drama Series (2011 and 2015) and the Golden Globe Award for Best Supporting Actor – Series, Miniseries or Television Film (2012) for his performance as Tyrion Lannister. Lena Headey, Emilia Clarke, Kit Harington, Maisie Williams, Diana Rigg, and Max von Sydow have also received Primetime Emmy Award nominations for their performances in the series.
  </div>
  <a href="#" class="more-less">Read More...</a>
</div>
<div class="card">
  <div class="content">
    Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels, the first of which is A Game of Thrones. It is filmed in Belfast and elsewhere in the United Kingdom, Canada, Croatia, Iceland, Malta, Morocco, Spain, and the United States. The series premiered on HBO in the United States on April 17, 2011, and its seventh season ended on August 27, 2017. The series will conclude with its eighth season premiering either in 2018 or 2019.[1]

Set on the fictional continents of Westeros and Essos, Game of Thrones has several plot lines and a large ensemble cast but centers on three primary story arcs. The first story arc centers on the Iron Throne of the Seven Kingdoms and follows a web of alliances and conflicts among the dynastic noble families either vying to claim the throne or fighting for independence from the throne. The second story arc focuses on the last descendant of the realm's deposed ruling dynasty, exiled and plotting a return to the throne. The third story arc centers on the longstanding brotherhood charged with defending the realm against the ancient threats of the fierce peoples and legendary creatures that lie far north, and an impending winter that threatens the realm.Game of Thrones has attracted record viewership on HBO and has a broad, active, international fan base. It has been acclaimed by critics, particularly for its acting, complex characters, story, scope, and production values, although its frequent use of nudity and violence (including sexual violence) has been criticized. The series has received 38 Primetime Emmy Awards, including Outstanding Drama Series in 2015 and 2016, more than any other primetime scripted television series. Its other awards and nominations include three Hugo Awards for Best Dramatic Presentation (2012–2014), a 2011 Peabody Award, and four nominations for the Golden Globe Award for Best Television Series – Drama (2012 and 2015–2017). Of the ensemble cast, Peter Dinklage has won two Primetime Emmy Awards for Outstanding Supporting Actor in a Drama Series (2011 and 2015) and the Golden Globe Award for Best Supporting Actor – Series, Miniseries or Television Film (2012) for his performance as Tyrion Lannister. Lena Headey, Emilia Clarke, Kit Harington, Maisie Williams, Diana Rigg, and Max von Sydow have also received Primetime Emmy Award nominations for their performances in the series.
  </div>
  <a href="#" class="more-less">Read More...</a>
</div>

body {
  padding: 50px;
  margin: 20px;
  background: red;
}

.element {
  background: #fff;
  border:2px solid #ccc;
  position: fixed;
  top:50px;
  right:50%;
  margin-right:-100px;
  height: 200px;
  width: 200px;
  display: inline-block;
}

.element:before {
  content: " ";
  position: absolute;
  height: 50px;
  width: 50px;
  background: url(https://lorempixel.com/100/100);
  border-radius: 50%;
  border:2px solid blue;
  top: -26px;
  left: 50%;
  margin-left: -26px;
}

Answer 3

您可以尝试...

body{
  
  background-color:#333;
  passing:0px;
  height:0px;
  
}
#app{
  background:#333 url('https://source.unsplash.com/random') no-repeat;
  background-size:cover;
  width:360px;
  height:560px;
  position:relative;
  overflow:hidden;
}
.app-bar{
  width:100%;
  height:50px;
  position:absolute;
  bottom:0px;
  left:0;
  
  
    
}

.app-bar .bar{
  line-height:50px;
  
  position:relative;
  width:100%;
  height:50px;
  background-image: radial-gradient(circle 35px at 315px 0, transparent 700px, #f44336 50px);
    
}


.app-bar .bar i{
  color:#FFF;
  display:block;
  line-height:50px;
  float:left;
  width:50px;
  text-align:center;
  cursor:pointer;
  margin-top:0px;
}
.app-bar .bar i:hover{
  background-color:rgba(0,0,0,.1);
}
.app-bar .bar button{
  padding:0px;
  box-sizing:border;
  text-align:center;
  margin:0px;
  bordeR:0px;
  outline:0px;
  width:60px;
  height:60px;
  line-height:60px;
  cursor:pointer;
  color:#FFFFFF;
  display:block;
  border-radius:50%;
  position:absolute;
  top:-30px;
  left:100%;
  margin-left:-75px;
  background-color:#f44336;
  transition: all .2s ease;
  
}
.app-bar .bar button span{
  line-height:60px;
  font-size:30px;
  
}
.app-bar .bar button:hover{
  transform:rotate(45deg);
  transition: all .2s ease;
}

<div id="app">
  <div class="app-bar">
    
    <div class="bar">
      <i class="material-icons">menu</i>
      <i class="material-icons">search</i>
      <button class="button">
        <span class="material-icons">add</span>
      </button>
    </div>
  </div>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" >

Answer 4

感谢您的帮助。

对于我的问题，我在这篇文章中发现了一个解决方案 here 并且我进行了改编。

所以对于那些也需要解决方案的人来说：

#wrapper { 
    width: 500px;
    height:400px;
    background: transparent;
    border: 0;
  
    /* Define half of half semi-cicle on the top for all */
    background:      
		radial-gradient(circle at 0 100%, transparent 0, yellow 0) bottom left,
		radial-gradient(circle at 100% 100%, transparent 0, yellow 0) bottom right,
		radial-gradient(circle at 0 0, transparent 25%, yellow 15px) top right,
		radial-gradient(circle at 100% 0, transparent 25%, yellow 15px) top left;
    /*Define top half of half circle background for specific Safari 5.1- 6.0*/
    background:      
		-webkit-radial-gradient(circle at 0 100%, transparent 0, yellow 0) bottom left,
		-webkit-radial-gradient(circle at 100% 100%, transparent 0, yellow 0) bottom right,
		-webkit-radial-gradient(circle at 0 0, transparent 25%, yellow 15px) top right,
		-webkit-radial-gradient(circle at 100% 0, transparent 25%, yellow 15px) top left;
  
    /*Define top  half of half circle background for specific Opera 11.6-12.0*/
    background:      
		-o-radial-gradient(circle at 0 100%, transparent 0, yellow 0) bottom left,
		-o-radial-gradient(circle at 100% 100%, transparent 0, yellow 0) bottom right,
		-o-radial-gradient(circle at 0 0, transparent 25%, yellow 15px) top right,
		-o-radial-gradient(circle at 100% 0, transparent 25%, yellow 15px) top left;
  
    /*Define top half of half circle background for specific Firefox 3.6-15*/
    background:      
		-moz-radial-gradient(circle at 0 100%, transparent 0, yellow 0) bottom left,
		-moz-radial-gradient(circle at 100% 100%, transparent 0, yellow 0) bottom right,
		-moz-radial-gradient(circle at 0 0, transparent 25%, yellow 15px) top right,
		-moz-radial-gradient(circle at 100% 0, transparent 25%, yellow 15px) top left;
  
   /*repeat  half of half circle*/
    background-size: 51% 51%;
    background-repeat: no-repeat;
    border: 0;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#content{
  padding-top: 25%;
  word-wrap: break-word;
}

<div id="wrapper" class="half-circle">
    <div id="content">asdasdasdasdasdasdasdasdasdasdasdasdasdasdsdasdasdasdasdasdasdasdasdasdasdasdasdasdassdasdadasasdasdasdasdasd</div>
</div>

中间有半圈

4 个答案: