如何在div的角上创建弯曲的边框？

Question

我正在尝试创建它：

当前看起来像这样：

我已经进行了很长时间的调整，无法弄清楚如何使其看起来完全像第一张照片。

这是我的代码：

    <Wrapper>
      <DaysLeftWrapper>
      <GoldText>108</GoldText>
      <Text>Days Left</Text>
      </DaysLeftWrapper>

const DaysLeftWrapper = styled.div`
  position: absolute;
  width: 75px;
  height: 75px;
  top: -13px;
  right: -13px;
  padding: 10px;
  border-radius: 50%;
  border: 0px solid white;
  background-color: grey;
`;

const Wrapper = styled.div`
  position: relative;
  width: 505px;
  align-items: center;
`;

文本和金色文本只是div样式。

如何使我的照片看起来更像第一张照片？

Answer 1

您在包装器组件上缺少border-radius。您可以从将border-radius: 8px添加到包装器本身开始。然后将值调整为最合适的值。

Answer 2

为包装器添加边框半径

const Wrapper = styled.div`
    border-radius: 10px;
`;

Answer 3

稍稍边界半径播放

const { useState, useEffect } = React;

const styledBox1 = {
  width: '300px',
  height: '300px',
  background: '#2F2F2F',
  border: '2px solid #5B97F4'
}

const styledBox2 = {
  border: '2px solid #C24E2B',
  width: 'inherit',
  height: 'inherit',
  display: 'flex',
  justifyContent: 'flex-end',
  alignItems: 'flex-start',
}

const styledBox3 = {
  flex: '0 0 150px',
  height: '150px',
  textAlign: 'right',
  background: '#333333',
  borderBottomLeftRadius: '100%',
  padding: '1rem 1rem 3rem 3rem'
}

const styledText1 = {
  color: '#D2B861',
  fontSize: '2rem'
}

const styledText2 = {
  color: '#BBBBBC',
  fontSize: '2rem'
}



const App = () => {


return <div style={styledBox1}>
  <div style={styledBox2}>
    <div style={styledBox3}>
      <div style={styledText1}>108</div>
      <div style={styledText2}>Days left</div>
    </div>
  </div>
</div>
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
  );

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>
<div id="root"></div>
<script src="https://unpkg.com/material-ui-lab-umd@4.0.0-alpha.32/material-ui-lab.development.js"></script>
<div id="root"></div>