안녕 사람들과 함께 두 경계로 만들려면, 내가 가진 블록 그 국경을하려고 : 이후 : 의사 요소, 버튼 같은 일을하지만, 전에 내가 거기에 붙어 . 여하튼 국경 너비로 끝내야한다고 생각합니다. 제발 도와 주실 수 있습니까?
Q
의사 요소
0
A
답변
2
방금 공유 이미지와 같은 것을 만들었습니다. 지금까지 무엇을
.outer-section{
background:#fdefe0;
width:200px;
height:400px;
border: 1px solid #c7bcaf;
border-radius:8px;
position:relative;
margin:30px;
}
.outer-section:before {
position: absolute;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 5px solid #fdefe0;
content: "";
top: -4px;
z-index: 2;
}
.outer-section:after {
position: absolute;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 5px solid #c7bcaf;
content: "";
top: -5px;
z-index: 1;
}
.inner-section {
background: transparent;
height: 100%;
position: relative;
}
.inner-section:before {
position: absolute;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 5px solid #fdefe0;
content: "";
bottom: 1px;
z-index: 2;
}
.inner-section:after {
position: absolute;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 5px solid #c7bcaf;
content: "";
bottom: 0;
z-index: 1;
}
.white-bg {
background: #fff;
height: 350px;
margin: 5px;
}
.button-section {
background: #e88d1c;
position: relative;
margin: 5px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
padding: 10px 0;
}
.button-section:before {
position: absolute;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 86px solid transparent;
border-top: 5px solid #e88d1c;
content: "";
bottom: -5px;
z-index: 2;
}
.button-innner {
background: #fff;
height: 10px;
width: 40%;
margin: auto;
}
<div class="outer-section">
<div class="inner-section">
<div class="white-bg">
</div>
<div class="button-section">
<div class="button-innner">
</div>
</div>
</div>
</div>
+0
안녕하세요, 솔루션 주셔서 감사합니다. 감사합니다. –
+0
여기에 바이올린이 업데이트되었습니다. 나는 응답 형식의 값을 https://fiddle.jshell.net/de23bsyy/에 부여했다. –
관련 문제
- 1. CSS 요소 특정 의사 요소
- 2. 알 수없는 의사 요소 또는 의사 클래스 :
- 3. 유효하지 않은 의사 요소 또는 의사 클래스
- 4. CSS 의사 요소
- 5. Sass 변수의 의사 요소?
- 6. 목록 의사 요소 후에는
- 7. IE10 호버 + 의사 요소
- 8. 클릭시 의사 요소 숨기기
- 9. CSS 컨테이너 의사 요소?
- 10. Polymer.js의 의사 요소 사용
- 11. 두 :: 의사 요소 후
- 12. 자바로 의사 요소 컨트롤
- 13. 다이나믹 : 의사 요소 후
- 14. jquery로 의사 요소 선택
- 15. 요소 + 요소 질의 액세스 : 전에 의사
- 16. 이미지를 전송하십시오. before 요소 뒤의 의사 요소
- 17. 의사 요소 : 이미지 요소 앞 또는 뒤에 :
- 18. 는`의사 요소 .css` 사용
- 19. 사용하여 CSS의 전환에 :: 의사 요소
- 20. 의사 요소 jquery를 사용하여 작업
- 21. 의사 결정 트리 구성 요소
- 22. jQuery를 사용한 의사 요소 애니메이션
- 23. CSS3 : 입력이있는 의사 요소 뒤
- 24. CSS 올바른 위치에 의사 요소
- 25. attr 배경 이미지가있는 의사 요소
- 26. 호버의 의사 요소 스타일 지정
- 27. CSS 의사 요소 크기 문제가
- 28. IE는 의사 요소 CSS를 건너습니까?
- 29. 의사 요소의 요소 유형은 무엇입니까?
- 30. CSS의 저작권 기호 : 의사 요소 후
했을 ..이 유 작동합니다 희망? 코드를 보여주세요. –