Question

我想知道如何制作如下图所示的红线上边框？我已经尝试了border-radius，但我无法弄清楚如何围绕顶部边框的底部。

Answer 1

我会使用:before创建一个可以设置样式的伪元素，因为它只用于演示，所以拥有一个空元素会不必要地冗长。

这是一个如何做到这一点的例子：

＆＃13;

.splitter {
  border: 1px solid #ddd;
  border-top: 0;
}
  .splitter:before {
    content: ' ';
    display: block;
    position: relative;
    top: -5px;
    width: 100%;
    height: 8px;
    background-color: red;
    border-radius: 100px / 70px;
  }

.myContent {
  padding: 0 20px;
}

＆＃13;

<div class="splitter">
  <div class="myContent">
    <h1>React or Angular</h1>
    <p>Lorem ipsum Mollit qui sunt consequat deserunt exercitation veniam.</p>
  </div>
</div>

＆＃13;

在JS Bin上也可以看到：

http://jsbin.com/hoqizajada/edit?html,css,output

Answer 2

我认为用一个div不可能。但是，您可以在其上方放置div并使用border-radius进行操作。

.inbox {
  width: 200px;
}
#top-border {  
  border: red 4px solid;
  border-radius: 4px;
}
#test{
  padding: 4px;
  height: 200px;
  background: #EEEEEE;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="top-border" class="inbox"></div>
  <div id="test" class="inbox"></div>
</body>
</html>

JSBIN：http://jsbin.com/pofolanuje/edit?html,css,output

Answer 3

这是完整的代码，希望这对您有所帮助;

.container{
  width:320px;
  height:520px;
  background:#fff;
  -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #e4e4e4;
}
.border-red{
  background:red;
  width:100%;
  height:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

<div class="container">
<div class="border-red">

</div>
</div>

圆角边角

3 个答案: