Question

我正在努力让折叠的角落在我的面板的整个表面上。

我不想为折角设置特定尺寸，因为我希望它覆盖整个表面，无论面板大小如何（如同在手机，平板电脑或台式机上显示的那样。） p>

我无法找到实现这一目标的简单解决方案。

这是我的代码：

＆＃13;

.panel-default1 {
  padding-top: 10px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
  height: 400px;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
}

.amg-corner-button_wrap {
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 40px;
}

.amg-corner-button_wrap:hover {
  width: 120px;
  height: 120px;
}

.amg-corner-button_wrap:hover div {
  width: 120px;
  height: 120px;
}

.amg-corner-button {
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background-color: #46982b;
  -webkit-transition: width 300ms, height 300ms;
  -moz-transition: width 300ms, height 300ms;
  -ms-transition: width 300ms, height 300ms;
  -o-transition: width 300ms, height 300ms;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
}

.amg-corner-button:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 0 120px 120px;
  border-style: solid;
  border-color: #46982b #fff;
}

.amg-corner-button_text {
  font-size: 14px;
  font-size: 1.4rem;
  width: 120px;
  position: absolute;
  top: 60px;
  right: 0;
  left: 0;
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform-origin: center top center;
  -moz-transform-origin: center top center;
  -ms-transform-origin: center top center;
  -o-transform-origin: center top center;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  text-align: center;
  color: #ffffff;
}

＆＃13;

<div class="panel panel-default1">

  <div class="panel-body">

    <div class='amg-corner-button_wrap'>
      <div class='amg-corner-button'></div>
      <span class='amg-corner-button_text'>Text Goes Here</span>
    </div>

  </div>
  <!-- panel body -->

</div>
<!-- panel default -->

＆＃13;

对此的任何帮助将非常感谢。

Answer 1

请尝试将此作为您的css使用。

stringr

我们做了两件事。我们更新了library(stringr) words <- c("apple", "Apple", "Pear", "pear") pattern <- paste(words, collapse = "|") dt <- data.frame( ItemNames = c("Superb apple", "Superb Pear", "Superb car"), Cost = c(1, 2, 3), stringsAsFactors = FALSE ) index <- str_detect(dt$ItemNames, regex(pattern)) dt[index,]$ItemNames <- "confirmed"和.panel-default1 { padding-top: 10px; border-radius: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.10); height: 400px; width: 100%; overflow: hidden; margin: 0 auto; position: relative; } .amg-corner-button_wrap { display: block; position: absolute; bottom: 0; right: 0; width: 40px; height: 40px; } .amg-corner-button_wrap:hover { width: 100%; height: 100%; } .amg-corner-button_wrap:hover div { width: 100%; height: 100%; } .amg-corner-button { display: block; position: absolute; bottom: 0; right: 0; width: 40px; height: 40px; background-color: #46982b; -webkit-transition: width 300ms, height 300ms; -moz-transition: width 300ms, height 300ms; -ms-transition: width 300ms, height 300ms; -o-transition: width 300ms, height 300ms; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); } .amg-corner-button:before { content: ""; position: absolute; top: 0; right: 0; border-width: 0 0 120px 120px; border-style: solid; border-color: #46982b #fff; } .amg-corner-button:hover::before { border-width: 0; } .amg-corner-button_text { font-size: 14px; font-size: 1.4rem; width: 120px; position: absolute; top: 60px; right: 0; left: 0; -webkit-transform-origin: center top; -moz-transform-origin: center top; -ms-transform-origin: center top; transform-origin: center top; -webkit-transform-origin: center top center; -moz-transform-origin: center top center; -ms-transform-origin: center top center; -o-transform-origin: center top center; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); text-align: center; color: #ffffff; }，其宽度和高度均为100％。这样，面板将占据面板的100％。

第二个变化是添加：

.amg-corner-button_wrap:hover

如果没有这个，我们将在面板中留下额外的三角形。我们需要这个三角形来创建我们在右下角的绿色口袋形状。

CSS折角占据了整个面板

1 个答案: