CSS를 사용하여 div의 대각선 상단 만들기

debugcn 에 게시 Dev

우마르 탄 비어

이 이미지와 같이 CSS를 사용하여 대각선 div를 만들고 싶은 프로젝트에서 작업 중입니다.

우마르 탄 비어

부트 스트랩 및 전환 왜곡 CSS 속성 사용 https://jsfiddle.net/oocputgz/24/

<div class="container">
<div class="row">
<div class="col-md-4">
<div class="blog-post-image">
<img src="https://i.imgsafe.org/20ff17cabf.jpg" class="img-responsive center-block" />
</div>
<div class="post-detail_container">
<div class="sperator"></div>
<div class="post-content">
<h3 class="post-title">
Hello World
</h3>
</div>
</div>
</div>
</div>
</div>

CSS 스타일 :

.post-detail_container
{
    position:relative;   
}

#blog-items .item
{
    padding:0px 15px;
}
.sperator
{
   position: absolute;
top: 0;
width: 100%;
height: 100px;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: skew(0, -7deg);
-moz-transform: skew(0, -7deg);
-ms-transform: skew(0, -7deg);
-o-transform: skew(0, -7deg);
transform: skew(0, -7deg);
background: red;
}
.post-content
{
    background-color:red;
    padding:15px 15px;
    min-height: 300px;
}

.post-title
{
  font-size: 40px;
  line-height: 24px;
  margin-bottom: 2px;
  color: #fff;
  text-align: center;
  margin-top: 88px;
}

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

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

에서 수정2021-06-13

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

CSS를 사용하여 div의 대각선 상단 만들기

CSS를 사용하여 div의 대각선 상단 만들기

for in 루프를 사용하여 배열을 사용하여 객체의 대각선 만들기

SVG를 사용하여 투명한 대각선 컷 만들기

CSS 의사 선택기를 사용하여 리본 모양 만들기

CSS를 사용하여 div 내부의 단락이 계속해서 하나씩 나타나도록 만들기

처리를 사용하여 시각적 단추 만들기

CSS를 사용하여 3 개의 빈 세로 상자 만들기

PHP를 사용하여 선택 상자에 대한 옵션 만들기

HTML / CSS를 사용하여 선과 원의 교차점 만들기

CSS를 사용하여 Div의 하단 그림자 만 숨기기

div 상단의 대각선

DIV 사각형에 대한 대각선 만들기

변환 방법 : CSS를 사용하여 div의 상단 및 하단 부분 크기 조정

CSS3를 사용하여 색상을 변경하여 성장하는 선 만들기

단 하나의 문을 사용하여 요소 클래스 또는 ID를 대상으로하는 CSS 선택기

항상 CSS 만 사용하여 본문 하단에 div 표시

CSS를 사용하여 사용자 정의 모양 만들기

html, css를 사용하여 색상으로 채울 수있는 사용자 정의 그래픽 만들기

Flexbox를 사용하여 범위와 단락 사이에 수평선 만들기

for 루프를 사용하여 데이터 프레임의 각 숫자 변수에 대해 세 개의 인접한 상자 그림 만들기

Python의 여러 기능에 대해 Pandas plot ()을 사용하여 시각화를위한 함수 만들기

HTML CSS 및 JavaScript를 사용하여 팝업 상자 만들기

dxl 스크립트 (DOORS)를 사용하여 폴더의 각 모듈에 대한 기준선을 만들 수 있습니까?

순수 CSS를 사용하여 육각형 행 만들기

jQuery를 사용하여 div의 동일한 높이 만들기

Google지도를 사용하여 단순화 된 버전의 tableau 만들기

여러 선택 상자를 사용하여 div 숨기기

각 셀에 대해 div를 작성하지 않고 CSS 그리드 만들기

CSS를 사용하여 JavaFX에서 TextField의 모양 만들기

Alterifyjs 라이브러리를 사용하여 서로 다른 형태의 여러 사용자 지정 대화 상자 만들기