1

I hope this hasn't been asked. I'm recently new to coding and I'm studying HTML CSS and a bit of java. the problem I have is a color that goes over a rounded border, creating this annoying little ..."fold? Now the easy solution is to add a clas with the round border on the bottom left... but I'm trying to keep it responsive... and if I do that I have a similar problem when the grid shrinks lack of angle LITTLE FOLD

here my CSS:

body {
  font-family: "Roboto", sans-serif;
  color: rgba(0, 0, 0, 0.781);
}
h1 {
  font-size: 150px;

  font-weight: 900;
  text-align: center;
  margin: 100px auto;
}
h2 {
  font-weight: 300;
  text-align: center;
}
.app-ctn {
  margin-top: 100px;
  padding: 10px 12px 0 12px;
  border-radius: 30px;
  background: rgb(234, 253, 255);
  background: linear-gradient(
    0deg,
    rgba(234, 253, 255, 1) 0%,
    rgba(240, 240, 240, 1) 100%
  );
}
.days {
  text-align: center;
  padding: 20px 0;
}
.gray {
  background-color: #ace1e77c;
}
.search {
  width: 100%;
  position: relative;
  display: flex;
}
.search-bar {
  width: 100%;
  border: 1px solid rgb(216, 216, 216);
  border-right: none;
  padding: 5px;
  height: 50px;
  border-radius: 5px 0 0 5px;
  outline: none;
  color: #9dbfaf;
}
.btn-search {
  float: right;
  border: none;
  background-color: rgb(216, 216, 216);
  padding: 6px 19px;
  border-radius: 0 5px 5px 0;
}
.btn-search:hover {
  background-color: rgb(170, 170, 170);
}
.col-no-border {
  padding: 0;
}
.today-bar {
  position: relative;
  top: 35px;
  margin-top: 50px;
  margin-bottom: 75px;
}
.temp-today {
  font-size: 70px;
}
.t-icon {
  font-size: 122px;
}
.w-icon {
  font-size: 35px;
}
.sun-icon {
  color: #f39c12;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>weather app</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" href="src/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<body>
    <div class="container">
        <div class="app-ctn shadow-lg">
        <div class="row justify-content-center">
            <div class="col-12 col-md-8">
            <form class="mt-5">
                <div class="search container-md ml-5">
                <input type="search" class="search-bar" placeholder="Search">
                <button type="submit" class="btn-search">
                <i class="bi bi-search"></i>
                </button>
                </div>
            </form>
            <h1>Berlin</h1>
            
        </div>
        <div class="col-12 col-md-4">
            <div class="today-bar text-center">
                <i class="bi bi-brightness-low-fill t-icon sun-icon"></i>
            <h2>Today</h2>
            <h2 class="temp-today">29°c</h2>
            </div>
            </div>

        </div>
        <div class="row">
            <div class="col-md col-no-border ">
                <div class="days gray">
                    <i class="bi bi-brightness-low-fill w-icon sun-icon"></i>
                    <p>Monday</p>
                    <h3>29°c</h3>
                </div>
            </div>
            <div class="col-md col-no-border">
                <div class="days">
                    <i class="bi bi-brightness-low-fill w-icon sun-icon"></i>
                    <p>Tuesday</p>
                    <h3>29°c</h3>
                </div>
            </div>
            <div class="col-md col-no-border">
                <div class="days gray">
                    <i class="bi bi-brightness-low-fill w-icon sun-icon"></i>
                    <p>Wednesday</p>
                    <h3>29°c</h3>
                </div>
            </div>
            <div class="col-md col-no-border">
                <div class="days">
                    <i class="bi bi-brightness-low-fill w-icon sun-icon"></i>
                    <p>Thursday</p>
                    <h3>29°c</h3>
                </div>
            </div>
            <div class="col-md col-no-border">
                <div class="days gray">
                    <i class="bi bi-brightness-low-fill w-icon sun-icon"></i>
                    <p>Friday</p>
                    <h3>29°c</h3>
                </div>
            </div>
            <div class="col-md col-no-border">
                <div class="days">
                    <i class="bi bi-brightness-low-fill w-icon sun-icon"></i>
                    <p>Saturday</p>
                    <h3>29°c</h3>
                </div>
            </div>
            
        </div>
        
        
        </div>
    </div>
    
    
</body>
</html>

any suggestion?

4

1 回答 1

1

您已经为margin-top 设置了解决方案，因此您可以对margin bottom 执行相同的操作...如果您想让margin 负责，可以以vh 为单位设置margin。

.app-ctn {
      margin-top: 100px;
      margin-bottom:100px;
      padding: 10px 12px 0 12px;
      border-radius: 30px;
      background: rgb(234, 253, 255);
      background: linear-gradient(
        0deg,
        rgba(234, 253, 255, 1) 0%,
        rgba(240, 240, 240, 1) 100%
      );
    }
于 2022-01-29T23:41:12.803 回答