굽힘 테두리를 만들기위한 테두리 너비

debugcn 에 게시 Dev

user3642164

이것은 이미지가 아닌 테두리 너비 로이 웹 사이트 와 같은 섹션을 어떻게 만들 수 있는지 알기 위해이 사이트에서 어려움을 겪고있는 약 2 시간 입니까? 이 같은 :

여기에 이미지 설명 입력 내가 추가 border-width:2000px;하면 사이트 아래에 스크롤이 나타납니다.

    .shape-sormei {
    padding: 30px 0;
    border-right-width: 1366px;
    border-color: rgba(0, 0, 0, 0) #133747 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    border-style: solid dashed solid solid;

}
.bot_box{
    border-style: solid dashed solid solid;
    border-width: 0 2880px 60px 0;
    height: 0;
    width: 0;
}

어떤 해결책?

로코 C. 불잔

CSS3 (최신 브라우저)

jsBin demo

자바 스크립트 대신 테두리 너비를 계산하려면
새로운 CSS3 단위 vw (뷰포트 너비)를 사용하면됩니다.

여기에 이미지 설명 입력

  <div class="border top"></div>
  <div class="content">
    <h1>Content</h1>
  </div>
  <div class="border bottom"></div>

.border{
    border-width: 0 100vw 60px 0; /* Or use:  0 0 60px 100vw  to invert! */
    border-style: solid dashed;
}
.border.top{    border-color: #D44032 transparent; }
.border.bottom{ border-color: transparent #D44032; }

_{에서 참고 위의 지원하려는 경우 그 오래된 브라우저를 일부 JS 폭 문서를 얻을 필요가있을 것이다.}

JS 사용 :

이전 브라우저와 호환되도록하기 위해 다음은 jQuery
를 사용 하여 올바른 테두리 너비를 얻는 예제입니다 .

jQuery를 사용한 jsBin 데모

jQuery(function( $ ){

  var $bord = $('.border');
  function setBordersWidth(){
    $bord.css("border-right-width", $(window).width() );
  }
  setBordersWidth(); // on DOM ready
  $(window).resize(setBordersWidth); // and on resize

});

CSS (참고로 vw)

.border{
    border-width: 0 0 60px 0; /* Or use: 0 0 60px 0   to invert! */
    border-style: solid dashed;
}
.border.top{    border-color: #D44032 transparent; }
.border.bottom{ border-color: transparent #D44032; }

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-1

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사