Cancel a border-radius at a specific position - Css

Brom
March 1, 2023
228 views
0 votes
2 Answers

I tried and I want to cancel the border radius of the class .title { border-radius: 0 } When the div hits its top position at 6.3vh.

I tried, searched, but I can’t find anything that works.
I tried with media queries and pseudo class without results..

Only with, css or sass /

html,
body {
  margin: 0;
  padding: 0;
}

.wrapper {
  height: auto;
  margin: 0 10vh;
  font-size: 3rem;
  background: red;
}

header {
  width: 100%;
  height: 6.3vh;
  background: orange;
  display: flex;
  justify-content: center;
  align-items: top;
  position: sticky;
  top: 0;
  z-index: 4;
}

.header_title {
  background: blue;
}

main {
  width: 100%;
  background: green;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: sticky;
  top: 6.3vh;
  z-index: 3;
}

.image {
  width: 100%;
  height: 53.7vh;
  background: burlywood;
  position: sticky;
  top: 6.3vh;
  z-index: 1;
}

.title {
  background: purple;
  border-radius: 20px 20px 0 0;
  position: sticky;
  top: 6.3vh;
  z-index: 3;
}

.cards {
  background: pink;
  width: 100%;
  position: sticky;
  z-index: 2;
  top: 60vh;
  margin-bottom: 40vh;
  ;
}

footer {
  width: 1 height: 40vh;
  background: grey;
  display: flex;
  justify-content: center;
  align-items: top;
  position: sticky;
  z-index: 3;
}

<div class="wrapper">
  <header>
    <div class="header_title">HEADER</div>
  </header>
  <main>
    <div class="image">IMAGE</div>
    <div class="title">MAIN</div>
    <div class="cards">
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
    </div>
  </main>
  <footer>
    FOOTER
  </footer>
</div>

Tags: css sass

Answers

Chosen as BEST ANSWER

Finally I found a trick to make it work. Thank you for your feedback.

:root {
  --radius_size: 20px;
  --negative_radius_size: calc(-1 * var(--radius_size));
}
  
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

.wrapper {
  background: red;
  height: auto;
  margin: 0 10vh;
  font-size: 2.5rem;
}

header {
  width: 100%;
  height: 6.3vh;
  background: orange;
  display: flex;
  justify-content: center;
  align-items: top;
  position: sticky;
  top: 0;
  z-index: 2;
}

.header_title {
  background: blue;
}

main {
  background: green;
  width: 100%;
  padding: 0 1rem 1rem;
}

.image {
  background: burlywood;
  width: 100%;
  height: 30vh;
  position: sticky;
  top: 6.3vh;
}

.title {
  background: purple;
  width: 100%;
  height: calc(6.3vh - var(--radius_size));
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius_size) var(--radius_size) 0 0;
  position: sticky;
  top: 6.3vh;
  z-index: 3;
}

.cancel_radius {
  background: lime;
  width: 100%;
  height: var(--radius_size);
  position: sticky;
  top: calc(6.3vh + var(--radius_size));
  transform: translateY(var(--negative_radius_size));
  z-index: 2;
}

.cards {
  background: pink;
  width: 100%;
  padding: 0 0 0 1rem;
  margin-top: var(--negative_radius_size);
  position: sticky;
  z-index: 1;
}

footer {
  width: 100%;
  background: grey;
  height: 20vh;
  display: flex;
  justify-content: center;
  align-items: top;
}

<body>
    <div class="wrapper">

        <header>
            <div class="header_title">HEADER</div>
        </header>

        <main>
            <div class="image">IMAGE</div>
            <div class="title">MAIN</div>
            <div class="cancel_radius"></div>

            <div class="cards">
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
            </div>
        </main>
        
       <footer>
            FOOTER
       </footer>

    </div>

</body>

(Edit)

$(window).scroll(function(){
    if ($(window).scrollTop() >= 300) {
        $('.title').addClass('border-radius');
    }
    else {
        $('.title').removeClass('border-radius');
    }
});

html,
body {
  margin: 0;
  padding: 0;
}

.wrapper {
  height: auto;
  margin: 0 10vh;
  font-size: 3rem;
  background: red;
}

header {
  width: 100%;
  height: 6.3vh;
  background: orange;
  display: flex;
  justify-content: center;
  align-items: top;
  position: sticky;
  top: 0;
  z-index: 4;
}

.header_title {
  background: blue;
}

main {
  width: 100%;
  background: green;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: sticky;
  top: 6.3vh;
  z-index: 3;
}

.image {
  width: 100%;
  height: 53.7vh;
  background: burlywood;
  position: sticky;
  top: 6.3vh;
  z-index: 1;
}

.title {
  background: purple;
  border-radius: 20px 20px 0 0;
  position: sticky;
  top: 6.3vh;
  z-index: 3;
}

.cards {
  background: pink;
  width: 100%;
  position: sticky;
  z-index: 2;
  top: 60vh;
  margin-bottom: 40vh;
  ;
}

footer {
  width: 1 height: 40vh;
  background: grey;
  display: flex;
  justify-content: center;
  align-items: top;
  position: sticky;
  z-index: 3;
}
.border-radius{border-radius:0!important;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head></head>

<body><div class="wrapper">
  <header>
    <div class="header_title">HEADER</div>
  </header>
  <main>
    <div class="image">IMAGE</div>
    <div class="title">MAIN</div>
    <div class="cards">
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
    </div>
  </main>
  <footer>
    FOOTER
  </footer>
</div>
</body>

</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Cancel a border-radius at a specific position – Css

Answers